第8章网页的CSS布局.docVIP

第8章 网页的CSS布局 网页布局排版就是把各种网页元素摆放在页面的指定的位置上。这些网页元素包括logo、banner、导航条、文字、图片等。不同的网页有不同的布局，一般情况下如何布局都是随网页内容和作者的创意而定。早期的网页布局通常是使用表格来实现的。通过表格的嵌套可以实现很复杂的布局，不过布局过后的后台代码已经很复杂了，很难读懂。表格布局的缺点还不止如此，缺少灵活性，一旦完成网页再想修改布局是很困难的。为了改变这种状况，现在的网页一般都采用CSS布局方法。 网页中的每个元素（文字或图像等）都占据着一定的页面空间。我们可以想象这个空间是一个盒子(Box)，如图8-1所示。盒子中间放着网页元素（例如文字“楷”），盒子边框（border）有一定宽度，网页元素和盒子内边框之间的距离称为内间距（padding），盒子外边框与别的盒子相邻还有一定的外间距（margin）。 图8-1 盒子模型 网页的CSS布局就是把这些盒子摆放好，以便达到预期的效果。所以，学习CSS布局首先应当了解单个的盒子（box）模型，了解盒子内部及盒子之间的一些特点。然后再了解正常情况下页面是如何自动摆放每个盒子的位置的。正常情况下，文档元素（文字、图像等）按顺序一个个排列起来，就像小河里的水流一样，即所谓标准文档流（Normal Document Stream），这是我们首先要了解的概念。然后，当我们了解了盒子的浮动(Float)和定位(position)方法之后，就可以随心所欲地布局网页元素了。 8.1 盒子模型 盒子(Box)是网页排版布局的最基本单元。盒子里面可以装文字、图像等网页元素，盒子模型的结构如图6-1所示。下面，通过一个实例来验证一下盒子的构造或称盒子模型。 例8．1 假如我们现在网页里插入2张相同的图画，两张图片紧挨着，如图8-2。为了看清盒子模型，现在对后1张画加上CSS样式，设定它的边框宽（border width：20px）、上、右、下、左4个边框的颜色分别为：#999 #00f #f00 #c00、 内边距(padding:10px)、外边距(margin:20px)之后，变成了图8-3。 图8-2原始图片 图8-3 第2张图片设置边框、内边距、外边距 HTML代码如下： html head title盒子模型/title style type=text/css .tp { border-top-width: 20px; border-right-width: 20px; border-bottom-width: 20px; border-left-width: 20px; border-top-color: #999; border-right-color: #00F; border-bottom-color: #F00; border-left-color: #C00; padding: 10px; margin: 20px; } /style /head body img src=img/15.jpg width=110 height=110 / img src=img/15.jpg width=110 height=110 class=tp/ /body /html 图8-2的两张图片都没有进行任何设置，即默认边框宽度、内边距、外边距都是零。所以，两张图片紧挨着。图8-3 中第2张图片的上、右、下、左4个边框宽度(border width)设置均为20px，颜色分别为#999 #00f #f00 #c00。4个内边距（padding）均为10px，4个外边距（margin）均为20px。 思考：若将上述代码中样式.tp修改如下，效果是否一样？（一样） .tp { border-width: 20px; border-color: #999 #00f f00 #c00; padding: 10px; margin: 20px; } 8.1.1盒子属性的简写形式 1. 盒子的属性可以用多种方式简写。可以给出1个、2个、3个、4个参数值。以边框宽度为例： Boeder-width:20px; 表示上、右、下、左4个边框均为20px。 Border-width:10px 20px:表示上、下边框宽10px，左右边框宽20px。 Border-width:10px 20px 30px;表示上边框宽10px，左、右边框宽20px，下边框宽30px。 Border-width:10px 20px 10px 30px;表示上、右、下、左边框宽分别为10px、20px、10px、30px。切记按