|
这显然是最筒单的一种布局形式。通过这个例子，希望读者能够顺便复习前面圆角框的制作方法。实现的效果如图1所示。本案例文件位于网页学习网CSS教程资源中“第13章\1-1-1.htm”。
一、放置第一个圆角框 先在页面中放置第一个圆角框，HTML代码如下。lodidance.com 折叠展开XML/HTML 代码复制内容到剪贴板
这组<div>……</div>之间的内容是固定结构的，其作用就是实现一个可以变化宽度的圆角框。要修改内容，只需要修改相应的文字内容或者增加其他图片内容即可。 注意：不要修改这组代码的结构。当需要多个圆角框时，直接复制并修改其中相应内容即可。 二、设置圆角框的CSS样式 为了实现圆角框效果，相应的CSS样式代码如下： 折叠展开CSS 代码复制内容到剪贴板
上面代码中的第一段是对整个页面的样式定义，例如文字大小等，其后的5段以.rounded开头的CSS样式都是为实现圆角框进行的设置。 注意：背景图片的路径不要弄错，否则将无法显示背景图片。 以上CSS代码在后面的制作中，都不需要调整，直接放置在<style></style>之间即可。此时网页的效果目前这个圆角框还没有设置宽度，因此它会自动伸展。 现在来给它设置固定的宽度。注意这个宽度不要设置在“.round”相关的CSS样式中，因为该样式会被页面中的各个部分公用，如果设置了固定宽度，其他部分就不能正确显示了。 因此，应该为该圆角框单独设置一个id，把针对它的CSS样式放到这个id的样式定义部分。设置margin实现在页面中居中，并用width属性确定固定宽度，代码如下： 折叠展开CSS 代码复制内容到剪贴板
然后，在HTML部分的<div class="rounded">……</div>的外面套一个div，代码如下： 折叠展开XML/HTML 代码复制内容到剪贴板
这时，在Firefox中的效果如图1所示，正确地实现了期望的效果。 但是在IE 6中的效果可以看到背景图像发生错误，这是由于IE 6本身的错误造成的，在IE 7中已经修正了这个错误。为了使背景图像在IE 6中也能正确显示，需要对圆角框设置增加对宽度的设置。实际上如果不设置为100%，也应该按照100%显示，但是人为设置lOO%后，会强制IE 6重新计算相关数值，从而正确显示背景图片。 折叠展开CSS 代码复制内容到剪贴板
修改后，在IE 6中的效果如图1所示。这是本章中最后一次修改关于“.rounded”部分的样式代码，以后就不会在涉及它的代码了，我们将把精力集中在如何制作出各种各样的完整页面布局上。 三、放置其他圆角框 接下来，将放置的圆角框再复制出两个，并分别设置id为“content”和“footer”，分别代表“内容”和“页脚”。相关代码如下： 折叠展开XML/HTML 代码复制内容到剪贴板
本章以后的代码都采用这种省略的写法，以省略号代替重复部分。如果读者阅读到这里，不理解省略了哪些代码．请务必复习前面章节的内容，以保证能够顺利地继续学习。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”，即只保留左侧的一根“弹簧”，就会把内容挤到最右边了。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/941.html |
13.2 单列布局