2.4 页面布局
页面布局技术是Web应用程序开发的关键技术之一，DIV+CSS页面布局模式是W3C标准的一个典型应用，具有许多功能上的优势，下面介绍DIV+CSS模式的页面布局及实例。
2.4.1 CSS简介
CSS（Cascading Style Sheet，层叠样式表），微软的MSDN文档翻译为级联样式表。简单地讲，样式定义如何显示HTML元素是CSS的核心，通常存储在样式表中，样式表是样式的集合，通常存储在CSS文件中。把样式添加到HTML 4.0中是为了解决内容与表现的分离问题。CSS有上百个控制属性，如background-color、font、color、layout等，通过为网页元素的CSS样式属性赋予不同的值，来控制网页的外观，这样极大地提高了网页设计的工作效率。
CSS具有如下功能：
CSS可以使样式代码独立于HTML页面，有利于对站点的统一控制，样式表被修改后，引入样式表的网页将自动更新，使网页修改、维护更容易；
CSS可以提高开发效率，有利于分工合作，使数据设计人员只需要用基本的标记呈现数据即可，而页面的外观显示则由样式设计人员来设计；CSS可以使网页的打开速度加快，因为相同的样式表不需要浏览器重复打开；
CSS与层结合，可以精确地实现页面元素的布局；
CSS通过特定的机制与特定的文档相联系，并对此文档进行表现控制。
1.CSS的语法
在CSS中定义样式的语法格式由三部分构成，即选择器、属性和值。
selector { attribute1 ：value1 ; attribute2：value2;……attributeN：
valueN}
其中，selector称为选择器，是样式表中使用一定规则指定的一个或一组标记，CSS通过被规则指定的标记，对文档中使用该标记的内容进行统一的外观控制；attribute:value中的attribute是需要控制的属性，属性与值配对，指定选择器的格式属性，如指定color为红色，则声明的形式为color:Red。
（1）标记选择器。selector为HTML中标记名称的选择器，称为标记选择器。标记选择器通过选择所有指定标记的节点，然后对其应用样式来控制文档的外观。标记选择器便于统一控制节点样式，对页面中所有这类标记都有效，具有通用性。定义标记选择器的一般格式如下：
tagName {attribute:value;
attribute:value;
…
}
其中，tagName为标记名称，被{}所包含的是规则指定；attribute:value;在{}之内，用“属性:值;”的形式为tagName指定规则。选择器可以有一个或多个attribute:value;形式指定的规则，如＜table＞标记选择器：
table { border-collapse:collapse;
background-color:#00FF00;
border-color:#FF0000;
}
其作用范围为文档中所有使用＜table＞标记的表格。
标记选择器可同时指定多个标记，如h1，h2，h3{…}。对于层次关系的标记应该使用ul lt{…}格式，样式表会按照标记的层次关系控制外观。
（2）类型选择器。类型选择器可以为标有特定类名的HTML元素指定特定的样式，为了缩小标记选择器的作用范围，用户可以使用类型选择器。类型选择器就是定义选择器时，为tagName标记名称指定className属性。类型选择器的一般定义格式如下：
tagName.className {attribute:value;
attribute:value;
…
}
其中，tagName可以省略，但是.className不能省略，这样对于所有指定class并且名称与className相同的标记起作用。在W3C中所有标记的id属性不能重名，而class名称可以重名。
（3）ID选择器。ID选择器可以为标有特定ID的HTML元素指定样式，和类型选择器一样，ID选择器可以缩小标记选择器的作用范围。ID选择器在定义选择器时，需要在tagName名称后加上idName，中间用“#”连接，其一般定义格式如下：
tagName#idName {attribute:value;
attribute:value;
…
}
其中，tagName可以省略，但是“#idName”不能省略，这样对于所有指定id并且名称与idName相同的标记起作用。在W3C中所有标记的id属性不能重名。
注意：有的CSS样式可以继承，如字体、文本的定义，另外一些样式是不可继承的，如边框、间距、布局、定位等。当样式定义重复出现时，最后定义的样式起作用，也就是CSS的就近原则。tagName为*的选择器是通用选择器，样式应用于所有的元素。
2.CSS的种类
CSS按照样式代码放置的位置不同可以划分为3种，即内联样式、内部样式表和外部样式表。
（1）内联样式。内联样式是将样式代码直接内联到标记内，以style作为属性，语句作为属性值，例如：
＜table style="border-collapse:collapse"＞
代码中的style="border-collapse:collapse"控制表格的边框显示为不折叠，这样可以实现单像素边框表格，默认的表格边框为双线的立体效果。
这种CSS样式与HTML标记书写在一起简单、直观，并且能够单独控制个别元素的外观，和传统的外观控制方式没有本质区别，样式代码分布在整个文档中，使样式的修改很困难，而且样式需要重复加载，运行效率较低。因此，内联样式一般不推荐使用。
【例2.12】内联样式示例，ch2_12.html页面效果如图2.12所示。
图2.12 ch2_12.html页面效果
＜html＞
＜head＞
＜title＞内联样式示例＜/title＞
＜/head＞
＜body＞
＜table style= "border-collapse:collapse;
background-color:#66CCFF;
border-color:#FF0066;
"
border="3" align="center"＞
＜tr＞＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞ ＜th＞工作单位＜/th＞＜/tr＞
＜tr＞＜td＞01＜/td＞＜td＞杨得力＜/td＞＜td＞男＜/td＞＜td＞河北××大学＜/td＞＜/tr＞
＜tr＞＜td＞02＜/td＞＜td＞周国正＜/td＞＜td＞女＜/td＞＜td＞北京××大学＜/td＞＜/tr＞
＜/table＞
＜/body＞
＜/html＞
（2）内部样式表。内部样式表是使用＜style＞标记将一段CSS代码嵌入HTML文档中，一般是使用＜style＞标记将一段CSS代码插入HTML文档头部，也就是＜head＞＜/head＞标记之间，例如：
＜head＞
＜style type="text/css"＞
＜!--
table { border-collapse:collapse;
background-color:#00FF00;
border-color:#FF0000;
}
--＞
＜/style＞
＜/head＞
上述代码中：
＜style type="text/css"＞
＜!-- CSS语句--＞
＜/style＞
是CSS语句的容器，＜!-- --＞是为了使不兼容CSS的浏览器忽略这段内容，避免将其显示在页面上。
【例2.13】内部样式表示例，ch2_13.html页面效果如图2.13所示。
图2.13 ch2_13.html页面效果
＜html＞
＜head＞
＜title＞内部样式表示例＜/title＞
＜style type="text/css"＞
＜!--
table { border-collapse:collapse;
background-color:#00FF00;
border-color:#FF0000;
}
--＞
＜/style＞
＜/head＞
＜body＞
＜table border="3" align="center"＞
＜tr＞＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞ ＜th＞工作单位＜/th＞＜/tr＞
＜tr＞＜td＞01＜/td＞＜td＞杨得力＜/td＞＜td＞男＜/td＞＜td＞河北××大学＜/td＞＜/tr＞
＜tr＞＜td＞02＜/td＞＜td＞周国正＜/td＞＜td＞女＜/td＞＜td＞北京××大学＜/td＞＜/tr＞
＜/table＞
＜/body＞
＜/html＞
CSS集中写入在其语句容器中，使用和维护比内联样式方便。内部样式表一般用于整体文档CSS样式控制的基础上，对文档的局部细节进行修饰的地方。
（3）外部样式表。外部样式表是通过外部样式表文件对文档进行外观控制的，CSS样式语句存储在一个独立的文本文件（样式文件）中，通过在文档中指定样式文件来控制文档外观。指定样式文件的标记是＜link＞，一般使用格式如下：
＜link rel="stylesheet" href="css/stylesheet1.css" type="text/css"/＞
该标记一般都放在文档的＜head＞＜/head＞标记之间。href属性指定了样式文件的路径，rel和type属性表明这是一个样式文件。
【例2.14】外部样式表示例，ch2_14.html页面效果如图2.14所示。
图2.14 ch2_14.html页面效果
stylesheet1.css文件代码如下：
table { border-collapse:collapse;
background-color:#00FF00;
border-color:#FF0000;
}
ch2_14.html文件代码如下：
＜html＞
＜head＞
＜title＞外部样式表示例＜/title＞
＜link rel="stylesheet" href="stylesheet1.css" type="text/css"/＞
＜/head＞
＜body＞
＜table border="3" align="center"＞
＜tr＞＜th＞编号＜/th＞＜th＞姓名＜/th＞＜th＞性别＜/th＞ ＜th＞工作单位＜/th＞＜/tr＞
＜tr＞＜td＞01＜/td＞＜td＞杨得力＜/td＞＜td＞男＜/td＞＜td＞河北××大学＜/td＞＜/tr＞
＜tr＞＜td＞02＜/td＞＜td＞周国正＜/td＞＜td＞女＜/td＞＜td＞北京××大学＜/td＞＜/tr＞
＜/table＞
＜/body＞
＜/html＞
3.CSS的层叠
CSS的层叠有两层意思，一是指CSS的作用范围是层叠的，逐层套用，具有继承性，例如，用户定义了body{color:Green;}，则＜body＞＜/body＞范围内的所有元素的字体颜色都会默认为Green（如果没有其他样式定义时）；二是指多重样式将层叠为一，也就是当同一个HTML元素被多个样式定义时，多个样式定义可以层叠为一。具体来讲，某些属性在不同的样式表中被同样的选择器定义，后面样式的属性值会覆盖前面样式的属性值，也就是属性值将从最后的样式中获得（就近原则）；继承来的样式不如指定的样式优先级高；ID选择器优先级＞CLASS选择器优先级＞HTML标签优先级。以上是简单的层叠方式，CSS样式优先级（Precedence of CSS Style Rules）有一套计算方法，详细内容可查看CSS手册。
【例2.15】CSS样式的层叠示例，ch2_15.html页面效果如图2.15所示。
图2.15 ch2_15.html页面效果
＜html＞
＜head＞
＜title＞样式层叠示例＜/title＞
＜link rel="stylesheet" href="stylesheet2.css" type="text/css"/＞
＜style type="text/css"＞
＜!--
#idtest{
color:blue;
text-align:left;
font-size:15pt;
}
h3 { color:black;
text-align: left;
font-size: 20pt;
}
--＞
＜/style＞
＜/head＞
＜body style="color:Green"＞
＜h2＞标题二，继承自body style，绿色＜/h2＞
＜h3 style="color:Red"＞标题三继承不如指定，外部、内部、内联样式层叠为一，红色＜/h3＞
＜h3＞标题三，遵循后面规则，外部、内部层叠为一，黑色＜/h3＞
＜h3 id="idtest" ＞标题三，ID＞CLASS＞HTML，ID选择器覆盖HTML标签选择器，蓝
色＜/h3＞
＜/body＞
＜/html＞
stylesheet2.css文件代码：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
4.CSS的框模型
框模型（Box Model）也称盒子模型，是CSS的重要概念，它是所有布局控制的基础。将每个HTML元素都放置到一个框中，通过控制框的外观来控制元素的外观，进而实现整个页面外观的控制，这个模型就是CSS的框模型。
CSS的框模型包括4个区，分别是内容（content container）、内边距区（padding）、边框（border）、外边距区（margin），其中内容部分也称元素（element），有内容高度（height）和内容宽度（width）属性，如图2.16所示。
图2.16 CSS的框模型
在指定一个元素大小时，就是根据框模型的参数指定的，如分层标记div的id选择器定义格式如下：
div#header{
width:700px;
height:100px;
border-width:2px;
padding:10px;
margin:10px;
background-color：#ccc;
}
● div为标记名称。
● header为标记的id号，标记名与id号之间用#分隔。
● width属性指的是内容的宽度，border-width指的是边框线的宽度，其他属性参照模型，取值为像素数。
● background-color取颜色值，十六进制码“1，2”、“3，4”、“5，6”相同时，可以省写为3位，“#”不能省略。
● margin属性可以简写为“margin:10px;”，表示四个方向值相同；当值不一样时，可以对四个方向分别定义“margin-top:1px;margin-right:2px;margin-bottom:3px; margin-left:4px;”，也可以简写为“margin:1px 2px 3px 4px;”，方向顺序为“上、右、下、左”。也可以单独定义某个方向，而其他方向是默认值，如“border-left:1px solid #333;”。
● padding属性与margin属性的取值规则相同。
● 框的宽度为width+2*padding+2*margin+2*border-width=744，这是根据CSS的定义计算得到的。
● 外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距高度等于两个发生合并的外边距高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，但行内框、浮动框或绝对定位之间的外边距不合并。
注意：背景应用于框模型的内容和内边距组成的区域，内边距的边缘是边框，外边距默认值是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距的默认值是零，但有的浏览器由用户代理样式表设置为非零，用户可以使用通用选择器置零。IE浏览器将框内容的width属性解释为框的总宽度，这一点与CSS标准有所区别。
5.CSS的定位
CSS定位就是定义元素框的出现位置，是CSS的重要内容，主要通过CSS提供的position、float等属性与top、left、right、bottom、z-index等属性配合实现。在CSS定位理论中将一切HTML元素都认为是“框”，即一切皆为框，div、h1或p等元素显示为一块内容，称为块框；span、strong、a元素显示在行内，称为行内框，可以将display属性设置为block、none来改变框类型。CSS有三种基本的定位机制，即普通流、浮动和绝对定位。
（1）普通流定位。普通流中元素的位置由元素在HTML中的位置决定，CSS定位默认为普通流定位，此时position取值为static或relative，没有指定position属性值时默认为static（也称无定位）。普通流定位模式下，块级框从上到下顺序排列，框之间的垂直距离是由框的垂直外边距合并计算出来的。行内框在一行中水平布置，这一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框，可以使用水平内边距、边框和外边距调整行内框的水平间距，垂直内边距、边框和外边距不影响行内框的高度。
相对定位是普通流定位模型中的一部分，使用较多。设置为相对定位的元素框会偏离它原本所占位置一定的距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位position属性取值为relative，下面通过例2.16演示块框与行框的相对定位。
【例2.16】设置4个块框，分别为容器框、框1、框2、框3，均采用相对定位机制，框2设置偏移top和left值，框3中行内框默认水平布置。ch2_16.html页面效果如图2.17所示。
图2.17 ch2_16.html页面效果
＜html＞
＜head＞
＜style type="text/css"＞
#mainbox {
width:600px;
height:300px;
margin:30px;
padding:30px;
background-color:#CCCCCC;
}
#box1_relative{
position:relative;
width:200px;
height:100px;
padding:20px;
background-color:#FF00FF;
}
#box2_relative{
position:relative;
left:20px;
top:30px;
width:200px;
height:100px;
background-color:#FF0000;
}
#box3_relative {
position:relative;
width:200px;
height:100px;
background-color:#00FF00;
}
.tip{
font-weight:bold;
color:#ff9955;
}
＜/style＞
＜/head＞
＜body＞
＜div id="mainbox"＞容器
＜div id="box1_relative"＞框1（未偏移）＜/div＞
＜div id="box2_relative"＞框2（偏移）＜/div＞
＜div id="box3_relative"＞＜p＞框3（未偏移）＜span class="tip"＞
span我的行内框排列示范＜/span＞无span我的行内框示范＜/p＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
（2）绝对定位。绝对定位是相对于包含块定位而言的，包含块可能是文档中的一个元素或者是初始包含块。设置为绝对定位的元素框将从文档流中完全删除，因此不占据文档流的空间，这一点与相对定位不同，相对定位的元素位置是相对于它在普通流中的位置，占据文档流空间。绝对定位的元素定位后生成一个块级框，不管原来它在正常流中生成何种类型的框。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序。绝对定位的position属性取值为absolute，下面通过例2.17演示绝对定位。
【例2.17】在例2.16的基础上，框1和框3相对定位，框2绝对定位。ch2_17.html页面效果如图2.18所示。
图2.18 ch2_17.html页面效果
＜html＞＜head＞
＜style type="text/css"＞
#mainbox {
position :relative ;
width:400px;
height:300px;
margin:30px;
padding:30px;
background-color:#CCCCCC;
}
#box1_relative{
position:relative;
width:200px;
height:100px;
padding:20px;
background-color:#FF00FF;
}
#box2_absolute{
position:absolute ;
left:100px;
top:120px;
width:200px;
height:100px;
background-color:#FF0000;
}
#box3_relative {
position:relative;
width:200px;
height:100px;
background-color:#00FF00;
}
.tip{
font-weight:bold;
color:#ff9955;
}
＜/style＞＜/head＞
＜body＞
＜div id="mainbox"＞容器
＜div id="box1_relative"＞框1（相对定位）＜/div＞
＜div id="box2_absolute"＞框2（绝对定位）＜/div＞
＜div id="box3_relative"＞＜p＞框3（相对定位）＜span class="tip"＞
span我的行内框排列示范＜/span＞无span我的行内框示范＜/p＞＜/div＞
＜/div＞＜/body＞＜/html＞
注意：包含块可能是最近已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，最初的包含块可能是画布或HTML元素。用户可以更改“mainbox”的定位，体会最近已定位祖先元素的概念，设置z-index属性值，改变框的遮盖。
（3）浮动。浮动就是框漂浮在普通文档流之外。浮动框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。在CSS中，通过将float属性设置为left或right等值来实现元素的浮动。
由于浮动框不在文档的普通流中，所以普通流中的块框表现得就像浮动框不存在一样，参与普通流的布局，而浮动框旁边的行框则围绕浮动框，即行框被缩短，从而给浮动框留出空间。用户可以利用创建浮动框来实现文本绕图排版。要想阻止行框围绕浮动框，需要对行框应用clear属性。clear属性的值可以是left、right、both或none，它表示行框的哪些边避开浮动框。下面通过例2.18演示浮动框、块框与行框之间的定位关系。
【例2.18】框1、框3为普通流布局，框2为浮动框，框3布局不受框2影响，框3中的行框围绕浮动框2绕排。ch2_18.html页面效果如图2.19所示。
图2.19 ch2_18.html页面效果
＜html＞
＜head＞
＜style type="text/css"＞
#mainbox {
width:450px;
height:300px;
margin:30px;
padding:30px;
background-color:#CCCCCC;
}
#box1{
width:180px;
height:80px;
padding:20px;
background-color:#FF00FF;
}
#box2_float{
float:left;
width:200px;
height:100px;
background-color:#FF0000;
clear:both ;
}
#box3{
width:350px;
height:100px;
background-color:#00FF00;
}
.tip{
font-weight:bold;
color:#ff9955;
clear:both;
}
p{
clear:none ;
}
＜/style＞
＜/head＞
＜body＞
＜div id="mainbox"＞容器
＜div id="box1"＞框1（普通流）＜/div＞
＜div id="box2_float"＞框2（浮动left）＜/div＞
＜div id="box3"＞＜p＞框3（普通流）＜span class="tip"＞
span行框绕排示范＜/span＞无span行框绕排示范＜/p＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
说明：用户可设置框2的float属性为right，设置行框p的clear属性为left，来体会块框布局、行框绕排和清理。
2.4.2 DIV层
1.DIV层标记
层又称为Block-Level区块、Div Element或CSS-Layer，中文一般都称之为层。DIV层标记是为HTML文档定义层的标记。＜div＞＜/div＞标记定义的层可以方便地放在页面的任意一个位置，除了平面上的并行定位。层还增加了三位空间的定位z-index，因为z-index定义了堆叠的顺序，类似于图形设计中使用的图层，所以拥有了z-index属性的元素被形象地称为层。
层的主要功能如下：
●可以利用层准确定位网页元素。在层中可以存放HTML文档所包含的元素，如文本、图像、其他层等，并精确定位到页面，这极大地方便了页面的布局。
● 可以产生重叠效果。因为层可以重叠，所以将网页元素重叠就可以产生许多重叠效果。
● 实现网页上的下拉菜单。层可以隐藏和显示，因此，用此特性可以实现子下拉菜单。
● 将层和时间轴配合，可以实现网页动画。
在HTML中使用＜div＞＜/div＞定义层，＜div＞标记使用内联样式定义层的格式如下：
＜div class="className" align="justify" id="header"
style="position：absolute;left:50px;top:50px;width:200px;
height:200px;z-index:1;background:#CC6666; border:#CC99CC"
title="dkdkdkk"＞＜/div＞
其中，class为层的类名称，类名称要符合HTML标识符的规范，并且可以重名；id为层的ID，在整个HTML文档中，id必须是唯一的；title为层的标题属性，取值为文字；style为层样式属性，取值为CSS样式语句，如“background:#cc6666; border:#cc99cc;position：absolute;left:50px;top:50px;width:200px; height:200px; z-index:1;”，样式语句采用“属性:属性值;”形式。
下面通过一个层定义的例子演示＜div＞标记的使用方法，体会层定义中各参数的含义。读者在学习此例时，可以通过调整参数值来观察实际显示效果，注意在IE和Firefox浏览器中显示的区别。
【例2.19】＜div＞标记使用示例，ch2_19.html页面效果如图2.20所示。整个页面由六个层组成，容器层id为main，在main层中有header、left、center、right和floor层，分别给不同的层设置了不同的背景色，便于读者观察、理解。
图2.20 ch2_19.html页面效果
＜html＞
＜head＞
＜title＞<div>＜/title＞
＜/head＞
＜body＞
＜div id="main" style="background-color:#000000; width:500px;
height:200px;"＞
＜div id="left" style="width:100px; height:200px; float:left;
background-color:#ff00ff;"＞
＜p＞最左边的平铺层＜/p＞＜/div＞
＜div id="center" style="width:200px; height:200px; float:left;
background-color:#ff0000;"＞
＜p＞中间的平铺层＜/p＞＜/div＞
＜div id="right" style="width:100px; height:200px; float:left;
background-color:#00ff00;"＞
＜p＞最右边的平铺层＜/p＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
2.DIV层定位
例2.19用到了＜div＞标记定义层，并通过style属性为层设置了样式。样式在控制层的大小、背景时使用了CSS的框模型。框模型常用的定位属性有position、float、z-index、top、right、left、bottom和visibility等，理解这些属性，会极大地帮助读者控制定义的层，使设计的页面更美观。
（1）position属性有五个取值，分别为static、relative、absolute、fixed、inherit。
●取值为static或者没有设置position属性时，为普通流定位，元素的位置按正常方式定位，即按文本流的正常顺序，从上到下或者从左到右进行定位。static为默认值，也可以理解为无定位。
● 取值为relative时，为普通流的相对定位模式，层的显示方式按相对于元素原来的位置来定位，此时需要指定left、top等属性，指定偏移量。
●取值为absolute时，为绝对定位模式，使用top、left、bottom和right属性可以将元素按照父容器指定的坐标定位在页面的任意位置。使用绝对定位的层前面或者后面的“层”会认为该层并不存在，也就是在z方向上，它是相对独立出来的，丝毫不会影响其他z方向的“层”。
●取值为fixed值时，使用top、left、bottom和right属性，相对于浏览器窗口定位层的位置，层固定漂浮在浏览器的某个位置，不会随页面内容的移动而移动。注意，在IE浏览器中会出现异常，Firefox浏览器中显示正常。
● 取值为inherit值时，层继承父容器的position属性值。
（2）top、right、bottom、left属性取值既可以是像素数，也可是百分比，并且只有父容器的position取值为非static值时才有效。
（3）float属性可以实现框的浮动，用于控制文本流的显示方向，可以取left、right、none和inherit值。float属性取值为left或right后，会影响到后面其他的层，要清除这些影响，可以设置clear:both;属性。需要注意的是，当div设置position取值为absolute或fixed值时，float属性无效。
（4）z-index属性在设置了position并取值为absolute或relative时有效，用于控制层在z轴上的排列顺序，值为整数，值越大层越靠上面。理解z-index属性时，可以将框模型（盒子模型）想象成三维结构。
（5）visibility属性用于控制层的显示与隐藏，可以取visible、hidden、collapse和inherit等值。当取visible值时，元素可见，取hidden值时，元素隐藏。关于更多属性，可以参考CSS手册。
【例2.20】在框模型指导下采用内部样式定义层，并设置层的position、float、z-index、left、top等属性，示例浮动定位、绝对定位、相对定位、固定定位，ch2_20.html页面效果如图2.21所示。
＜html＞
＜head＞
＜style type="text/css" ＞
#main {
width:600px;
height:500px;
margin:30px;
padding:30px;
z-index:1;
background-color:#CCCCCC;
}
#left {
position:relative;
float:left;
left:20px;
top:20px;
width:200px;
height:200px;
background-color:#FF00FF;
z-index:3;
}
#center {
position:absolute;
left:190px;
top:200px;
width:200px;
height:200px;
background-color:#FF0000;
z-index:4;
}
#right {
position:relative;
left:20px;
top:40px;
width:200px;
height:200px;
background-color:#00FF00;
z-index:2;
}
#fixed {
position:fixed;
left:268px;
top:300px;
width:200px;
height:200px;
background-color:#0033FF;
z-index:5;
}
＜/style＞
＜/head＞
＜body＞
＜div id="main"＞
＜div id="left"＞左：浮动定位＜/div＞
＜div id="center"＞中：绝对定位＜/div＞
＜div id="right"＞＜p class="tip"＞右：普通流相对定位＜/p＞＜/div＞
＜div id="fixed"＞固定定位＜/div＞
＜/div＞
＜/body＞
＜/html＞
图2.21 ch2_20.html页面效果
注意：效果图是Firefox浏览器的显示效果。在此例中分别定义了DIV部分（结构）和CSS部分（表现），然后通过DIV的ID属性，使用到了相对应的CSS样式＜div id="main"＞＜/div＞。请读者仔细体会各层的位置是如何进行定位的，可以通过修改属性参数，比较显示效果来加深理解。
2.4.3 DIV+CSS页面布局
页面布局一直是Web应用程序界面设计的一个重要内容，使用框架技术和表格技术实现页面布局是DIV+CSS模式出现之前的主流方式。在W3C标准中，DIV+CSS方式实现页面布局是一个典型的应用。
1.DIV+CSS页面布局的优点
在W3C标准中，网页主要由三部分组成，即结构（Structure）、表现（Presentation）和行为（Behavior）。结构主要包括DIV在内的一系列XHTML标记，表现主要包括CSS层叠样式表，行为主要包括对象模型（如W3C DOM、ECMAScript等）。利用这种模式开发的网页是符合W3C设计标准的，其有下列优点：
● 使网页开发与维护变得更简单、容易。因为使用了更具语和结构化的XHTML标记，让程序员更加容易、快速地理解网页代码。
●网页下载、读取速度变得更快。使用DIV+CSS模式开发网页，使网页HTML代码减少，下载速度更快；因为网页使用相同的CSS样式表，所以不用重复下载和加载，使显示速度加快。
●网页可访问性和适应性提高。语义化的HTML使结构和表现相分离，通过使用不同的CSS样式表，可以很方便地让读屏器、掌上电脑、智能电话等对其进行访问。
2.DIV+CSS页面布局的工作流程
在学习了DIV和CSS的相关知识后，如何使用DIV+CSS实现网页的布局？下面就用DIV+CSS布局为例，介绍页面布局的工作流程。
页面布局的工作流程没有统一的规定，是人们在网站开发中不断总结出来的，不同的开发团队使用的流程也有所区别，这里给读者一个大体的建议。
【例2.21】网站页面布局示例，ch2_21.html页面效果如图2.22所示。
图2.22 ch2_21.html页面效果
（1）使用图形和图像制作工具（如Photoshop）或手工绘制出网站页面的效果图，以像素为单位给出页面布局中各板块元素的大小及颜色的RGB值。
（2）对照效果图，使用页面制作工具（如Dreamweaver、Editplus等）和DIV+CSS代码绘制页面框架。在容器层div#main中，定义了五个子层，即div#header、div#left、div#center、div#flooder、div#right，它们在父容器中按文本流方式进行排列，即默认从上到下排列，可利用通过层的float:left;属性值来让其从左到右排列。
＜html＞
＜head＞
＜title＞<div>＜/title＞
＜style type="text/css" ＞
#main{
background-color:#f5f5f5;
width:600px;
height:300px;
}
#header{
background-color:#b6b6b6;
height:50px;
width:600px;
float:left;
text-align:center;
}
#left{
width:105px;
height:200px;
float:left;
background-color:Transparent;
}
#mainmenu{
width:495px;
height:25px;
float:left;
background-color:Transparent;
}
#center{
width:400px;
height:200px;
float:left;
background-color:#ffffff;
}
#right{
width:95px; height:200px; float:left;
background-color:Transparent;
}
#flooder{
background-color:#b6b6b6;
width:600px;
height:25px;
clear:both ;
text-align:center;
}
ul.menu_u{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.menu_a{
float:left;
width:5em;
text-decoration:none;
color:Black ;
background-color:Transparent;
padding:0.2em 0.8em 0.2em 0.4em;
border-style:solid;
border-bottom-width:1px;
border-color:#f0f0f0;
}
a.menu_a:hover {
background-color:#b6b6b6;
}
li.menu_l{
display:inline;
}
p.tip{
text-align:center;
}
＜/style＞
＜/head＞
＜body＞
＜div id="main" ＞
＜div id="header" ＞
＜p＞页面布局的头部＜/p＞
＜/div＞
＜div id="left"＞
＜p class="tip" ＞左边菜单栏＜/p＞
＜ul class="menu_u" ＞
＜li class="menu_l"＞＜a class="menu_a" href="#"＞设置密码＜/a＞＜/li＞
＜li＞＜a class="menu_a" href="#"＞基本信息＜/a＞＜/li＞
＜li＞＜a class="menu_a" href="#"＞课程信息＜/a＞＜/li＞
＜li＞＜a class="menu_a" href="#"＞教材信息＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜div id="mainmenu"＞
＜ul class="menu_u" ＞
＜li class="menu_l"＞＜a class="menu_a" href="#"＞系统管理＜/a＞＜/li＞
＜li＞＜a class="menu_a" href="#"＞学生信息＜/a＞＜/li＞
＜li＞＜a class="menu_a" href="#"＞教师信息＜/a＞＜/li＞
＜li＞＜a class="menu_a" href="#"＞选课信息＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜div id="center"＞
＜p class="tip" ＞中间的平铺层＜/p＞＜/div＞
＜div id="right"＞
＜p class="tip" ＞最右边的平铺层＜/p＞＜/div＞
＜div id="flooder" ＞页面布局的页脚部分＜/div＞
＜/div＞
＜/body＞
＜/html＞
（3）细化每个板块，填充内容信息。将每个板块的文本、图形、链接等添加到板块中，细化网站的页面。
注意：读者在实现此例时，应该使用网页制作工具的代码视图，这样有利于对标记、CSS样式属性的记忆和理解，对今后的实际开发大有益处。