Styling boxes

先决条件

在开始此模块之前，您应该已经基本熟悉HTML，如 HTML简介模块中所述，并且熟悉CSS基础知识，如 href ="/ webstart / Introduction_to_CSS"> CSS简介。

指南

这些文章将教会你所有你需要的样式CSS框在你的网页上有趣和有用的方式。

盒子模型概要

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.