Styling boxes

2018-05-15 17:26 更新

先決條件

在開始此模塊之前,您應該已經(jīng)基本熟悉HTML,如 HTML簡介模塊中所述,并且熟悉CSS基礎知識,如 href ="/ webstart / Introduction_to_CSS"> CSS簡介。

注意:如果您在計算機/平板電腦/其他設備上工作,但您無法創(chuàng)建自己的文件,則可以嘗試(大部分)在線編碼中的代碼示例 程序,例如 JSBin > Thimble

指南

這些文章將教會你所有你需要的樣式CSS框在你的網(wǎng)頁上有趣和有用的方式。

盒子模型概要
We looked at the basics of the CSS box model in our Introduction to CSS module. This article will provide a recap, and dive into some further details on the subject.
背景
In CSS you can do a lot to style the background behind your content. We've already looked at some simple uses, such as basic background colors and images; in this article we'll tell the whole story, and look at some advanced features like multiple background images, and color gradients.
邊框
Again, we've already looked at borders a bit — simple uses like setting border colors and styles. Here we'll give you an idea of what else is available, such as rounded corners and border images.
樣式化表格
Styling an HTML table isn't the most glamourous job in the world, but sometimes we have to do it. This article provides a guide to making HTML tables look good, with the tools detailed in the previous articles.
高級盒子效果
This article acts as a box of tricks, providing an introduction to some of the advanced features available for styling boxes that don't fit into the other categories above — like box shadows, blend modes and filters.

評估

以下評估將測試您對上述指南中所述的盒子造型技術的理解。

Creating fancy letterheaded paper
If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment we'll challenge you to create an online template to achieve such a look.
A cool looking box
Here you'll get some more practice in creating cool-looking boxes, by trying to create an eyecatching box.

也可以看看

Creating fancy boxes
Some more cool box styling ideas.
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號