Styling boxes

先決條件

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

指南

這些文章將教會你所有你需要的樣式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.