13.2 单列布局

这显然是最筒单的一种布局形式。通过这个例子，希望读者能够顺便复习前面圆角框的制作方法。实现的效果如图1所示。本案例文件位于网页学习网CSS教程资源中“第13章\1-1-1.htm”。

图1 单列固定宽度的页面布局

一、放置第一个圆角框

先在页面中放置第一个圆角框，HTML代码如下。lodidance.com

这组<div>……</div>之间的内容是固定结构的，其作用就是实现一个可以变化宽度的圆角框。要修改内容，只需要修改相应的文字内容或者增加其他图片内容即可。

二、设置圆角框的CSS样式

为了实现圆角框效果，相应的CSS样式代码如下：

上面代码中的第一段是对整个页面的样式定义，例如文字大小等，其后的5段以.rounded开头的CSS样式都是为实现圆角框进行的设置。

以上CSS代码在后面的制作中，都不需要调整，直接放置在<style></style>之间即可。此时网页的效果目前这个圆角框还没有设置宽度，因此它会自动伸展。

现在来给它设置固定的宽度。注意这个宽度不要设置在“.round”相关的CSS样式中，因为该样式会被页面中的各个部分公用，如果设置了固定宽度，其他部分就不能正确显示了。

因此，应该为该圆角框单独设置一个id，把针对它的CSS样式放到这个id的样式定义部分。设置margin实现在页面中居中，并用width属性确定固定宽度，代码如下：

然后，在HTML部分的<div class="rounded">……</div>的外面套一个div，代码如下：

这时，在Firefox中的效果如图1所示，正确地实现了期望的效果。

但是在IE 6中的效果可以看到背景图像发生错误，这是由于IE 6本身的错误造成的，在IE 7中已经修正了这个错误。为了使背景图像在IE 6中也能正确显示，需要对圆角框设置增加对宽度的设置。实际上如果不设置为100%，也应该按照100%显示，但是人为设置lOO%后，会强制IE 6重新计算相关数值，从而正确显示背景图片。

修改后，在IE 6中的效果如图1所示。这是本章中最后一次修改关于“.rounded”部分的样式代码，以后就不会在涉及它的代码了，我们将把精力集中在如何制作出各种各样的完整页面布局上。

三、放置其他圆角框

接下来，将放置的圆角框再复制出两个，并分别设置id为“content”和“footer”，分别代表“内容”和“页脚”。相关代码如下：

本章以后的代码都采用这种省略的写法，以省略号代替重复部分。如果读者阅读到这里，不理解省略了哪些代码．请务必复习前面章节的内容，以保证能够顺利地继续学习。lodidance.com

每一个部分中的内容可以随意修改，例如更改每一个部分的标题，以及相应的内容，也可以把段落文字彻底删掉。

从CSS代码中可以看到，3个div的宽度都设置为固定值760像素，并且通过设置margin的值来实现居中放置，即左右margin都设置为auto，就像左右两边各有一个弹簧一样，把内容挤在页面中央。

此外还需要注意，在每个圆角框的下部都有一行文字，即图中用灰色文字写作“查看详细信息”，这段文字是不能直接删除的，因为它承担着放置背景图像的任务。如果不希望看到这行文字，可以把这几个字删除，但是<p>和</p>这对标记不能删除。

然而即使删除了这几个字，只要保留了p标记，就会有一定的高度，这样会使每个部分的下部留有较大的一段空白。如果要减小这段空白，可以用CSS将这个p标记的文字高度和行高设置为0。

至此，最简单的一种布局就完成了。

如果希望3个div都紧靠页面的左侧或者右侧，又该怎么办呢？方法很简单，只需要修改3个div的margin值即可，具体的步骤如下。

如果要使它们紧贴浏览器窗口左侧，可以将margin设置为“0 auto 0 0”，即只保留右侧的一根“弹簧”，就会把内容挤到最左边了；反之，如果要使它们紧贴浏览器窗口右侧，可以将margin设置为“0 0 0 auto”，即只保留左侧的一根“弹簧”，就会把内容挤到最右边了。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表