CSS布局要求您将整个网站布局视为一个整体，然后将这些部分放在一起。了解如何使用CSS构建简单的3列布局。
09年1月1日绘制你的布局
您可以在纸上或图形程序中绘制布局。如果您已经考虑过线框或更广泛的设计，请将其简化为构成网站的基本框。本文附带的这个设计在主要内容区域中有三列，以及页眉和页脚。如果仔细观察，可以看到三列的宽度不相等。
在绘制布局后，您可以开始考虑尺寸。此示例设计将具有以下基本尺寸：
- 宽度不超过900像素
- 左侧20 px排水沟
- 列和行之间为10 px
- 250px，300px和300px宽的列
- 顶行高150px
- 底行是100px高
编写基本HTML / CSS并创建容器元素
由于此页面将是有效的HTML文档，因此请从空的HTML容器开始
添加基本CSS样式以将页边距，边框和填充清零。虽然新文档还有其他标准CSS样式，但这些样式是获得干净布局所需的最小样式。将它们添加到文档的头部：
要开始构建布局，请放入容器元素。有时您可以在以后删除容器，但对于大多数固定宽度的布局，使用容器元素可以更轻松地跨不同的Web浏览器进行管理。所以在体内把这个： 在CSS样式表中，放入： 容器定义了网页内容的宽度，以及外部的任何边距和内部的填充。对于本文档，容器宽870像素，左侧有20像素的水槽。排水沟设置为边缘样式，但容器上的填充被清零以防止任何元素与容器一样宽。 ＃容器 { 宽度：870px; 保证金：0 0 0 20px; / *右下角左下方* / 填充：0; } 如果您现在保存文档，将很难看到容器，因为它没有任何内容。如果添加占位符文本，您将能够更清楚地看到容器元素。 你如何决定标题行的样式很大程度上取决于它的内容。如果标题行只是要有徽标图形和标题，那么使用标题标记（ 标题行的HTML位于容器的顶部，如下所示： 然后，要在其上设置样式，底部会添加一个红色边框，以便您可以看到它结束的位置，边距和填充被清零，宽度设置为100％，高度设置为150px： #coniner h1 { 保证金：0; 填充：0; 宽度：100％; 身高：150px; 向左飘浮; border-bottom：#c00 solid 3px; } 不要忘记用float浮动这个元素：left;属性。编写CSS布局的关键是浮动所有东西 - 甚至是与容器宽度相同的东西。这样，您始终知道元素在页面上的位置。 CSS后代选择器仅将样式应用于#container元素内的H1元素。 使用CSS构建三列布局时，需要将布局分为两组。因此，对于这个三列布局，中间和右列并分组并放置在两列布局的左列旁边，其中左列为250px宽，右列为610px宽（两列为300列） ，加上他们之间的排水沟10px）。 HTML看起来像这样： Ut aliquip ex ea commodo consequat。 Velit esse cillum dolore ut enim ad minim veniam，lorem ipsum dolor sit amet。在rephenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur。 Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat。 Ut enim ad minim veniam，sed do eiusmod tempor incididunt ullamco laboris nisi。 Ut labore et dolore magna aliqua。 Velit esse cillum dolore eu fugiat nulla pariatur。 列中的占位符文本使测试时更加明显。 CSS看起来像这样： #container＃col1 { 宽度：250px; 向左飘浮; } #container＃col2outer { 宽度：610px; 漂浮：对; 保证金：0; 填充：0; } 左侧的列浮动到左侧，而另一列浮动到右侧。因为两列的总宽度是860px，所以它们之间有10px的沟槽。 要创建三列，请在较宽的第二列中添加两个div，就像在最后一步中在容器列中添加了2个div一样。 HTML看起来像这样： Ut enim ad minim veniam，sed do eiusmod tempor incididunt ullamco laboris nisi。 Ut labore et dolore magna aliqua。 Velit esse cillum dolore eu fugiat nulla pariatur。 Nam libero tempore，quia voluptas坐在aspernatur dicta sunt explicabo。Ullam corporis suscipit laboriosam，magnam aliquam quaerat voluptatem。 Itaque earum rerum hic tenetur a sapiente delectus，sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore。 CSS看起来像这样： ＃col2outer＃col2mid { 宽度：300px; 向左飘浮; } ＃col2outer＃col2side { 宽度：300px; 漂浮：对; } 由于这两个300px宽的盒子在一个610px宽的盒子内，它们之间将再次有一个10px的天沟。 现在页面的其余部分已设置样式，您可以添加页脚。使用带有“页脚”ID的最后一个div，并添加内容以便您可以看到它。您还可以在顶部添加边框，这样您就可以知道它的起始位置。 HTML： CSS： #container #footer {
向左飘浮;
宽度：870px;
border-top：#c00 solid 3px;
} 09年8月 现在您已完成布局，您可以开始添加自己的个人风格和内容。请记住，页眉和页脚上的边框已添加以显示布局部分，而不是专门用于设计。 这是整个文档，HTML和CSS： 设计容器样式
使用标题的标题标记
）比使用a更有意义
我的标题行
要获得三列，请从构建两列开始
在宽第二列内添加两列
添加页脚
添加您的个人风格和内容
最终的HTML / CSS
