等。不管块级元素本身宽度是多少，它的占位符(由虚线框标出)一直延伸到该行的末尾。每一行的长度取决于其父容器的宽度。
例8.2 块级元素与行内元素
代码如下:
块级元素与行内元素
块级元素DIV
3
行内元素Span
效果如图8-4
图8-4 块级元素与行内元素
从效果图中看到，块级元素的盒子会在水平方向上自动延伸，直至一行的最右端为止，
如虚线所示。这是块级元素的特点，虚线所包含范围就是该块级元素所占的位置。行内元素
可在同一行内排列多个原素。
8.1.3 行内元素与块级元素的相互转换
可以使用盒子的display属性来实现块级元素和行内元素的相互转换。
例8-3 将上例中头两个DIV块级元素的Display属性改设为inline;将第1个span行内元素
的display属性改设为block。观察其效果。
代码如下:
块级元素与行内元素
块级元素DIV
行内元素Span
4
效果如图8-5
图8-5 display属性转换块级元素和行内元素
8.1.4 在标准流中盒子间距离的计算
通常情况下(即在标准流中)，两个盒子之间的位置关系无非是水平并排放置、垂直上下放置或者内外嵌套放置3种情况。这时，计算两个盒子的距离实际上就是计算二者的margin。这里有一定规定。
1( 行内元素间水平间隔(margin)的计算
两个行内元素只能在一行中并排放置，二者之间的距离就是相邻外边距(margin)之和。
Span1 Span2
Margin-right Margin-left
图8.6 行内元素之间的距离外边距之和
2( 块级元素间垂直距离(margin)的计算
两个块级元素不可能处在一行，故只能有垂直方向的距离。两个块级元素之间在垂直方向上的距离，等于二者margin中的最大者。注意，不是二者之和。
DIV1 DIV1
Margin-bottom Margin-bottom
Margin-top DIV2
DIV2
图8.7 块级元素之间的距离取大的
5
3( 嵌套盒子间距离(margin)的计算
两个盒子嵌套，外面的盒子成为“父”盒子，包在里面的称为“子”盒子。在网页布局
中，DIV标记形成嵌套的情况很普遍，往往有多层嵌套，即形成“祖父”、“父”、“子”甚至
更复杂的情况。
子块级元素也会在水平方向上自动延伸。不过，延伸的界限不是网页边界，而是父盒子
的限制位置。
例8-4盒子嵌套
父子块的边距算法
运行效果:
6
图8-8盒子嵌套
图8-9 父盒子的border、padding、margin
图8-10子盒子的border、padding、margin
由以上3图可见，子DIV盒子到父DIV上边框的距离为子margin-top+父padding-top，既30px+10px=40px;二者右边距为子maegin-right+父padding-right ，既10px+10px=20px;二者下边距为子margin-bottom+父padding-bottom，既20px+10px=30px;二者左边距为子margin-left+父padding-left，既10px。
8.3 盒子的浮动
CSS中有一个float属性，在默认情况下(即在标准流中)其值为none，不起作用。如果需要的话，float的值可设为left或right，实现左浮动或右浮动。元素就会向上层浮动后就脱离了标准流。
在标准流中，一个块级元素在水平方向会自动延伸，一直延伸到其父元素的边界;而在垂直方向上和其他块级元素依次排列，不能并排。但是，使用向上“浮动”方式后，该元素脱离标准流，那将会是怎样的情景呢,
下面通过一些具体例子认识一下浮动是如何实现的。
8.3.1 制作基础页面
先做一个基础页面，作为后面练习浮动的起始文件。文件名为7-5.Html。 例8-5 基础网页7-5.html，代码如下:
float属性
Box-1
Box-2
Box-3
CSS中有一个float属性，在默认情况下(即在标准流中)其值为none，不起作
用。如果需要的话，float的值可设为left或right，块级元素就会向其上级元素的左侧或右
侧靠紧，上级元素盒子的宽度不再延伸，而是收缩，变成行内元素。浮动属性在网页布局中
起着非常重要的作用
运行效果如图8-9
8
图8-9 初始效果
本例中使用了DIV嵌套。外层DIV使用类选择器(class="father")，其中包含,个DIV块级元素box-1、box-2、box-3，以及一段文字。这都是为后边观察浮动效果做准备。 8.3.2 设置DIV浮动
8.3.2.1 设置第1个浮动DIV
在图8-9基础页面中，先让box-1左浮动，看看浮动后的效果。方法就是将8-5.html头部样式表中
.son1{
background-color:#0066CC
}
改为
.son1{
background-color:#0066CC
float:left;
}
效果图如8-10所示。
图8-10 设置第1个盒子左浮动效果
9
图8-11 浮动后的box-1
图8-12 box-1左浮动后的box-2
由此可见，第1个DIV盒子box-1向上左浮动后脱离标准流，不再遵守标准流的规则，Box-1盒子自身宽度已不再伸展，其宽度为仅仅能容下其中文字而已(图7-11)。而标准流中的DIV盒子box-2取代了原box-1的位置(图7-12)，box-1浮动于box-2之上，box-1和box-2的左边界重合。
8.3.2.2 设置第2个浮动DIV
接下来再让第2个盒子也左浮动。方法是再在上边第一步的基础上，修改样式.son2。将
.son2{
background-color:#FF0000;
}
改为:
.son2{
background-color:#FF0000;
float:left;
}
修改后效果如图7-13。
图8-13 box-1、box-2左浮动后效果
Box-1、box-2都左浮动以后，两者都脱离了文档流，向上浮动于box-3之上。这时，他们反而像行内元素一样顺序排列。以下分解图会看得更清楚。
10
图8-14 box-1及其占位空间
图 8-15 box-2及其占位空间
图 8-16 box-1、box-2左浮动后，box-3上移、占位情况
8.3.2.3设置第3个浮动DIV
接着上面的实验，再将最后一个DIV盒子box-3也左浮动。方法是在上一步的基础上，
修改样式.son3。具体如下，将
.son3{
background-color:#00FF66
}
改为:
.son3{
background-color:#00FF66;
float:left;
}
修改后的效果如图8-17。
11
图8-17 3个DIV盒子全部左浮动
3个DIV盒子box-1、box-2、box-3全部左浮动后，…
标记中的文字向上移动，接在box-3后面按行内元素方式排列。此时，3个DIV盒子相当于3幅图片按顺序排列，其他文字则环绕在他们周围。
8.3.2.3 改变浮动方向
在上例的基础上，如果改变浮动的方向，例如，让box-1右浮动，即改变.son1的样式如下:
.son1{
background-color:#0066CC;
float:right;
}
则效果如图7-18所示。
图8-18 box-1右浮动效果
Box-1右浮动后，固定在父容器的右侧。其余内容(box-2、box-3及,标记中的文字)向左移动。
本例虽然简单，但它说明了一个问题，就是使用,,,布局，可以在现有,,,,代码不作任何改动的情况下，调换盒子的显示位置，从而达到改变网页布局的目的。
8.3.2.4 使用clear属性结束浮动
为了更好地说明clear的用法，在上例的基础上，修改Box-1中的代码，使之实现,行显示。代码如下:
Box-1
Box-1
Box-1
Box-1
12
效果如图8-19所示。
图8-19 box-1变成,行显示
Clear的作用是结束浮动的影响。有,种用法:clear :left结束左浮动、clear :right结束右
浮动、clear :both 同时结束左、右浮动的效果。为什么要结束浮动效果、什么时候结束浮动
效果,我们以图8-19为例说明。
如果不想让文字环绕在浮动后的盒子周围，而是单独在新行显示，就必须在,段落中结
束浮动的影响。具体方法是，修改,段落的样式表。
.father p{
border:1px dashed #111111;
background-color:#ff90ba;
}
改为:
.father p{
border:1px dashed #111111;
background-color:#ff90ba;
clear:left;
}
这时，左浮动的效果在,盒子中消失了。效果如图8-20。
图8-20 左浮动取消了，右浮动还在 如果要取消所有的浮动效果，则应修改.father p样式表: .father p{
border:1px dashed #111111;
background-color:#ff90ba;
clear : both;
13
}
修改后效果如图8-21所示。
图8-21 用both 清除所有浮动效果
注意:clear方法只能在不需要浮动效果的盒子中使用，例如本例中的,盒子。决不能在已经浮动过的盒子(如box-1、box-2、box-3)中使用。有时候，为了结束浮动效果，专门再增加一个空DIV盒子，然后设置其样式clear : both，以结束浮动的效果。
8.4 盒子的定位
在CSS中与排版布局有关的属性除了float之外，还有一个就是position，按字面意思可翻译成定位。Position有4个取值:
, Static:静态定位。这是默认属性值。
, Relative:相对定位。它以盒子自身起始的位置为参照。例如以盒子起始位置的左
上角为圆点，进行X、Y轴方向移位定位。
, Absolute:绝对定位。绝对定位的基准是一个已经定位的祖先盒子。例如父盒子已
经定位，则以父盒子的左上角为坐标原点，在X、Y轴方向发生移位以便定位。绝
对定位的盒子脱离了标准流，因此不会影响其他兄弟盒子的定位。
, Fixed:固定定位。固定定位的基准是浏览器窗框，其位置与浏览器内容无关，与
父盒子无关。当拖动浏览器窗口的滚动条时，固定定位的盒子不动。 8.4.1 静态定位
静态定位(static) 没有任何移动的效果，保持在原来的位置上。这是position默认的属性值，当CSS中没有设置position属性时，就是静态定位。前面讲的所有实例都没有设置position属性，所以都是静态定位。
例8-6 静态定位页面，后面各定位例都是以次为基础的。
代码如下:
position属性
效果如图8-22所示。
图8-22 没有设置position属性时的状态
注意:两个DIV盒子father和block1的颜色都是通过背景色设置的。若是图片也通过背景图片设置，一般不会通过插入图片的办法实现。
8.4.2 相对定位
相对定位(relative)方法是以盒子原来的位置为参照来定位的。例如，若以原来盒子的左上角为圆点，X轴方向由left 的值来确定;Y轴方向由top的值来确定，left与top的值可为正值，也可为负值，正值表示坐标的正方向，负值表示坐标的反方向。
圆点还可以任意确定，例如用right和top分别表示X、Y轴方向的值，则原点选的就是右上角。注意，选择不同的圆点，就选择了不同的坐标系，就有不同的正方向。
0 0 Left Right
Top Top
15
图8-23左上角坐标系 图8-24右上角坐标系
Bottom Bottom
没mm 没mm
Left right 0 0
图8-25左下角坐标系 图8-26右下角坐标系 例8-7 在例7-6中，block1以左上角坐标系定位，X、Y方向各移动30px。具体方法，只要修改CSS样式表中#block1即可。
原来样式:
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
修改样式:
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative;
left:30px;
top:30px
}
修改后效果如图8-27。
图8-27 相对定位
若采用右上角坐标系，X、Y方向仍移动30px。则#block1样式表修改如下: #block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative;
16
right:30px;
top:30px
}
效果如图8-28。
图8-28 左上角坐标系
若采用左下角坐标系，X、Y方向仍移动30px。则#block1样式表修改如下:
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative;
left:30px;
bottom:30px
}
效果如图8-29。
图8-29 左下脚坐标系
若采用右下角坐标系，X、Y方向仍移动30px。则#block1样式表修改如下:
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
17
position:relative;
right:30px;
bottom:30px
}
效果如图8-30。
图8-30 右下角坐标系 8.4.3 绝对定位
绝对定位(absolute)的基准是其祖先(父或祖父等)盒子，当然该祖先盒子自身应当
是已定了位的。如果其祖先盒子都未设置过定位方式，则以浏览器为定位标准。绝对定位的
盒子都脱离了标准流。
下面就以实例来说明绝对定位的原则。
1(首先建立一个基础页面。
例6-7 6-7.Html代码如下:
absolute属性
效果如图8-31。
图8-31为设置定位的原始页面
由上图可见，本例中一个父DIV盒子里面有3个子DIV盒子，都是标准流方式排列，尚
未定位。
2(使用绝对定位
下面将第2个盒子box-2绝对定位，观察其效果。方法是修改例6-7中样式#block2如下:
#block2{
position:absolute;
top:0;
right:0;
}
效果如图8-32。
19
图8-32 box-2绝对定位
本例中只是对box-2进行了绝对定位操作，X、Y方向位移全是0px。由于其父盒子没有定过位，故它以浏览器右上角为基准定位。
若此时对其父盒子也定位，再看效果。方法是接上例修改样式#father如下:
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
position:relative;
}
效果如图8-33。
图8-33 父盒子设置了定位
当父盒子设置了定位以后，Box-2就以父盒子为定位标准，回到了父DIV的右上角。
注意:在网页布局中所使用的方法之一就是绝对定位法。首先设置父盒子相对定位，这样，子盒子绝对定位就有了依据。
例8-8 若要布局页面如图8-34所示，试用绝对定位法实现之。
Page Header
MainContent Site Bar Content
Page Footer
图8-34 绝对定位布局
20
8-8.html源代码如下:
1+2+1
外部样式表文件Layout.css内容如下:
#header,#mainContent,#footer{
margin:0 auto;
width:760px
}
#header {
height:100px;
background:#9c6;
margin-bottom:5px;
}
#mainContent {
position:relative;
height:400px;
}
#sidebar {
position:absolute;
top:0;
left:0;
width:200px;
height:398px;
background:#cf9;
}
#content {
margin-left:202px;
height:398px;
21
background:#ffa;
}
#footer {
height:60px;
background:#9c6;
}
效果如图8-35所示。
图8-35 绝对定位布局
注意，本例中间部分(MainContent)使用了绝对定位法布局。首先，在父DIV(MainContent)中用相对定位，这样其子DIV(SideBar)就有了绝对定位的依据。设sideBar 的top:0px;left:0px;即与父DIV的左上角对齐。因为sideBar绝对定位后脱离了标准流，它的兄弟DIV(content)布局时仍在标准流中，就当sideBar不存在一样。设置content 的margin-left:202px;
正好让开sideBar(宽度为200px)，排在sideBar的右边，布局完成。
综上所述，绝对定位布局的法则是:相对父亲绝对儿。
用绝对定位的方法布局的网页不会随窗口大小的改变而改变。
8.4.4 固定定位
Position属性的第4个取值是固定定位(fixed)。固定定位与绝对定位有些类似，区别在于基准不一样。固定定位的基准不是祖先元素，而是浏览器窗口。由于目前还没有被IE6支持，因此暂不介绍。
8.5 DIV+CSS布局方法
8.5.1 CSS排版的观念
CSS排版是最近几年内才发展起来的新观念。它将页面首先在整体上进行标记分块处理，然后对各快进行CSS定位，最后再在各块中添加相应的内容。通过CSS排版的页面，更新十分便利，甚至连改变拓扑结构都很容易。
8.5.2 DIV+CSS布局的主要方法
DIV+CSS布局方法主要有两种:绝对定位发法和浮动法。绝对定位法就是先在父DIV中设置相对定位，然后再子DIV中用绝对定位法定位，如同例6-8所示。浮动定位法的要领是，在子DIV中设置浮动，多数情况下设置左浮动(float:left)。下面，还是以例7-2页面为例，
22
用浮动法实现布局。
例8-9 浮动法布局
8-9.html与8-8完全相同。所不同的是样式表文件Layout1.css。
Layout1.css代码如下:
#header,#mainContent,#footer{
margin:0 auto;
width:760px
}
#header {
height:100px;
background:#9c6;
margin-bottom:5px;
}
#mainContent {
height:400px;
}
#sidebar {
float:left;
width:200px;
height:398px;
background:#cf9;
}
#content {
float:left;
height:398px;
width:558px;
background:#ffa;
}
#footer {
height:60px;
background:#9c6;
clear:both;}
效果如图8-36。
23
图8-36 浮动法布局
本例中不涉及绝对定位或相对定位。只要在子DIV中设置其浮动。例如本例ID号为
sidebar 的样式为:
#fidebar{
float:left;
width:200px;
height:398px;
background:#cf9;
}
设置本DIV左浮动，并指明宽200px、高398px，背景色为#cf。
设置ID号为content的DIV容器样式为:
#content {
float:left;
height:398px;
width:558px;
background:#ffa;
}
设置本DIV左浮动，高398px、宽558px，背景色#ffa。
注意:这两个DIV的宽度之和不能超过其父DIV(# mainContent)的宽度760px。
最后，在不浮动的#footer DIV中，消除浮动的影响(clear: both;)。 8.5.3 网页布局实例
最后以一电子商务网站的为例，具体讲述一下网页布局的一些具体做法和技巧。这些技
巧包括DIV浮动、DIV中图片的显示、如何制作导航条等。 例8-10 《红色旅游》网站
图8-37 《红色旅游》网站主页
24
《红色旅游》网站结构图:
# container
#banner
#globallink
#left #main
#login #Latest
#Recommend
圣地
#category #new 风光
城市 #tips
图8-38 DIV布局结构图
index.html代码:
旅游
26
__
样式文件style.css代码:
body{
margin:1px 0px 0px 0px;
padding:0px;
text-align:center;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:701px;
height:auto;
text-align:left;
background-color: #FF8080; }
#banner{
width:700px;
height:164px;
background-image: url(hsly.jpg); }
#globallink{
margin:0px; padding:0px; }
#globallink ul{
list-style:none;
padding:0px; margin:0px; }
28
#globallink li{
float:left;
text-align:center;
width:100px;
}
#globallink a{
display:block;
padding:9px 6px 11px 6px;
background:url(button1.jpg) no-repeat;
margin:0px;
}
#globallink a:link, #globallink a:visited{
color:#630002;
text-decoration:none;
}
#globallink a:hover{
color:#FFFFFF;
text-decoration:underline;
background:url(button1_bg.jpg);
/* 替换背景图片 */
}
#left{
width:180px;
float:left;
margin:1px 0px 0px 0px; }
#login{
background: url(yh.jpg) no-repeat;
padding:55px 0px 10px 0px;
margin:0px 1px;
}
#login form{
padding:0px; margin:0px; }
#login p{
margin:0px; text-align:left;
padding:5px 0px 0px 25px; }
#login p input{
font-family:Arial, Helvetica, sans-serif;
29
font-size:12px;
}
#login form input.text{
border-bottom:1px solid #000000;
border-left:none; border-right:none;
border-top:none;
padding:0px; width:90px;
}
#login form input.btn{
border:1px solid #000000;
background-color:#ffeff0;
height:17px; padding:0px;
}
#login p a:link, #login p a:visited{
color:#333333;
text-decoration:none;
}
#login p a:hover{
color:#000088;
text-decoration:underline; }
#category{
background: url(cs.jpg) no-repeat;
padding:55px 0px 40px 0px;
margin:0px 1px;
}
#category h4{
margin:0px 18px 0px 18px;
padding:3px 0px 1px 5px;
background-color:#ffd1d1;
font-size:12px;
}
#category ul{
list-style:none;
margin:0px;
padding:5px 22px 15px 22px; }
#category ul li{
padding:2px 0px 2px 16px;
border-bottom:1px dashed #999999;
background:url(icon1.gif) no-repeat 5px 7px;
}
#category ul li a:link, #category ul li a:visited{
30
color:#000000;
text-decoration:none; }
#category ul li a:hover{
color:#666666;
text-decoration:underline; }
#main{
float:left;
width:518px;
margin:1px 0px 0px 2px }
#latest{
background: url(rm.jpg) no-repeat;
padding:35px 0px 0px 0px; }
#latest img{
border:none;
padding-left:1px;
}
#recommend{
background: url(dh.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF; }
#recommend br,#new br, #tips br{
display:block;
clear:both;
margin:0px; padding:0px; }
#recommend ul, #new ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 8px; }
#recommend ul li, #new ul li{
text-align:center;
float:left;
width:125px;
}
#recommend ul li img, #new ul li img{
border:none;
31
margin:5px 0px 3px 0px;
padding:0px;
}
#recommend ul li a:link,#recommend ul li a:visited, #new ul li a:link,#new ul li a:visited{
color:#666666;
text-decoration:none;
}
#recommend ul li a:hover, #new ul li a:hover{
color:#d20005;
text-decoration:underline; }
#new{
background: url(xw.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF; }
#tips{
background: url(bd.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF; }
#tips ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 30px; }
#tips ul li{
background:url(icon2.gif) no-repeat 5px 6px;
padding:1px 0px 1px 12px;
float:left;
width:220px; /* 指定宽度 */
}
#tips ul li a:link,#tips ul li a:visited{
color:#222222;
text-decoration:none;
}
#tips ul li a:hover{
color:#d20005;
text-decoration:underline; }
32
网页内容全部在body中。所以首先定义body样式:
body{
margin:1px 0px 0px 0px;
padding:0px;
text-align:center;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
关键是设置整个网页的文字大小为12px、英文字体Arial、对齐方式居中，又定义了内
边距为0px、外边距上、右、下、左分别为1px、0、0、0。
网页将所有的内容都放在DIV容器中，共11个DIV。ID号为#container的是最外层的
DIV，所有其他DIV全部放在其中。#container下面有4个DIV，分别为#banner、#globallink、
#left、#main;#left下包含2个DIV:#login、#category;#main下包含4个DIV:#latest、
#recommend、#new、#tips嵌套的树状结构如图8-39所示。
#container
#main #banner #globallink #left
#Login #latest
#category
#recommen圣地
d
风光 #new
城市#tips body{
marg
图8-39 DIV嵌套结构图 in:1px
图中可见，#container容器(DIV)在最上方，它包含了其他所有的DIV。作为布局的基0px 0px
础，它的样式定义为: 0px;
#container{ padd
position:relative; ing:0px;
margin:0px auto 0px auto; text-
width:701px; align:cent
height:auto; er;
text-align:left; font-
background-color: #FF8080; size:12px;
} font-
设置宽度701px，这就
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
好网页的宽度，下面DIV布局的宽度不能超过这个限度。实family:Ari际上页面宽度为700px，多1px是为了使右边框出现一条竖边线。这就决定网页是在浏览器al,
中部宽700px的宽度中。外边距:margin:0px auto 0px auto;上下0px，左右居中。 Helvetica,
sans-serif33
;
}
#banner是网页的横幅，是插入的一幅画，方法是。
#globallink是网站的导航条，要求不仅能够超链接，而且对鼠标操作导航条时有不同的样式要求。导航条一般都是用无序列表实现的。下面结合代码讲解其中的技巧。 #globallink{
margin:0px; padding:0px;
}
#globallink ul{
list-style:none;
padding:0px; margin:0px;
}
#globallink li{
float:left;
text-align:center;
width:100px;
}
#globallink a{
display:block;
padding:9px 6px 11px 6px;
background:url(button1.jpg) no-repeat;
margin:0px;
}
#globallink a:link, #globallink a:visited{
color:#630002;
text-decoration:none;
}
#globallink a:hover{
color:#FFFFFF;
text-decoration:underline;
background:url(button1_bg.jpg) no-repeat;
/* 替换背景图片 */
}
我们知道，无序列表的原始样式是定好的，如图8-40:
图8-40 无序列表
若要将图7-40样式改变成水平导航条，首先要去掉列表前面的符号(此处为“”)。然后要将原来纵向排列的各列表项水平排列。
#globallink ul{
list-style:none;
34
padding:0px; margin:0px;
}
其中list-style:none;就是去掉列表小前面的符号。注意，设置在ul，对其中各列表项全都适用。
对于每个具体的列表项，按下面样式:
#globallink li{
float:left;
text-align:center;
width:100px;
}
每个列表项都左浮动(float:left;)，这样就水平排列了。另外注意，每个列表项宽度为100px，这就是说，共有,个列表项，总共700px，正好和#container容器的宽度相同。同时，也为后面为实现菜单动画的图片制定好了宽度。
菜单动画是指当鼠标处在不同的状态下，导航菜单有不同的表现。具体实现代码如下: #globallink a{
display:block;
padding:9px 6px 11px 6px;
background:url(button1.jpg) no-repeat;
margin:0px;
}
超链接(,)平时背景图片为button1.jpg，将列表项文字转换成块级元素(display:block;)，列表项文字块间无外边距(margin:0px;)，用以保证,个超链接文字块列表项总共为700px。超链接前、后样式一样:
#globallink a:link, #globallink a:visited{
color:#630002;
text-decoration:none;
}
颜色为(RGB)#630002，无下划线(text-decoration:none;)。
当鼠标指针指向(或浮于)超链接链接列表项时，样式发生变化:
#globallink a:hover{
color:#FFFFFF;
text-decoration:underline;
background:url(button1_bg.jpg) no-repeat;
/* 替换背景图片 */
}
背景图片切换为button1_bg.jpg，由于颜色较深，文字变成白色(color:#FFFFFF;)，无下划线(text-decoration:underline;)。
本例的导航条设计有普遍意义，应用很广泛。各种网页的导航条基本上都用此方法实现。再发展一步，不仅是导航条，很多连续显示的图片、文字或图、文交叉显示的地方都可用此方方法实现。
再下来就是,个内容,，,(#left和#main)。#left位于网页内容区的左侧，#main位于内容区的右侧。,个,，,布局都采用左浮动，,者宽度之和不能超过700px。
#left中包含一个登录界面(#login)，,个站内分类搜索界面(category)。其样式: #left{
35
width:180px;
float:left;
background:#FFFFFF url(leftbottom.jpg) no-repeat bottom;
margin:1px 0px 0px 0px;
}
#login{
background:url(login.jpg) no-repeat;
padding:55px 0px 10px 0px; }
#login form{
padding:0px; margin:0px;
}
#login p{
margin:0px; text-align:left;
padding:5px 0px 0px 25px;
}
#login p input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#login form input.text{
border-bottom:1px solid #000000;
border-left:none; border-right:none;
border-top:none;
padding:0px; width:90px;
}
#login form input.btn{
border:1px solid #000000;
background-color:#ffeff0;
height:17px; padding:0px;
}
#login p a:link, #login p a:visited{
color:#333333;
text-decoration:none;
}
#login p a:hover{
color:#000088;
text-decoration:underline; }
#category{
background:url(category.jpg) no-repeat;
padding:55px 0px 40px 0px; }
36
#category h4{
margin:0px 18px 0px 18px;
padding:3px 0px 1px 5px;
background-color:#ffd1d1;
font-size:12px;
}
#category ul{
list-style:none;
margin:0px;
padding:5px 22px 15px 22px; }
#category ul li{
padding:2px 0px 2px 16px;
border-bottom:1px dashed #999999;
background:url(icon1.gif) no-repeat 5px 7px;
}
#category ul li a:link, #category ul li a:visited{
color:#000000;
text-decoration:none; }
#category ul li a:hover{
color:#666666;
text-decoration:underline; }
#main容器是内容的主区域。其样式为:
#main{
float:left;
width:518px;
margin:1px 0px 0px 2px }
#latest{
background:url(latest.jpg) no-repeat;
padding:35px 0px 0px 0px; }
#latest img{
border:none;
padding-left:1px;
}
#recommend{
background:url(recommend.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF; }
37
#recommend br,#new br, #tips br{
display:block;
clear:both;
margin:0px; padding:0px; }
#recommend ul, #new ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 8px; }
#recommend ul li, #new ul li{
text-align:center;
float:left;
width:125px;
}
#recommend ul li img, #new ul li img{
border:none;
margin:5px 0px 3px 0px;
padding:0px;
}
#recommend ul li a:link,#recommend ul li a:visited, #new ul li a:link,#new ul li a:visited{
color:#666666;
text-decoration:none;
}
#recommend ul li a:hover, #new ul li a:hover{
color:#d20005;
text-decoration:underline; }
#new{
background:url(new.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF; }
#tips{
background:url(tips.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF; }
#tips ul{
list-style:none;
38
margin:0px;
padding:5px 5px 5px 30px;
}
#tips ul li{
background:url(icon2.gif) no-repeat 5px 6px;
padding:1px 0px 1px 12px;
float:left;
width:220px; /* 指定宽度 */
}
#tips ul li a:link,#tips ul li a:visited{
color:#222222;
text-decoration:none;
}
#tips ul li a:hover{
color:#d20005;
text-decoration:underline;
}
8.6 DIV+CSS布局的各种方法分析
当前流行的网站基本上都是用DIV+CSS布局。对于各种不同结构的网页可以使用不同的CSS布局方法;即使是同一个网页也可以使用多种CSS布局的方法。下面，我们通过具体的实例介绍这些方法。
8.6.1 1-2-1布局
这种布局方法就是将网页分为上、中、下3部分，中间的部分又分为左、右两部分，故称1-2-1布局，如图8-41。
图8-41 1-2-1布局
1-2-1布局HTML结构代码如下:
39
1-2-1布局
CSS代码:
布局方法1:绝对定位法
body {
margin: 0px;
padding: 0px;
}
#container {
margin:0 auto;
background-color:#999900;
height:600px;
width:600px;
}
#banner {
background-color: #33CC99;
height: 98px;
width:600px;
margin-bottom:2px; }
#content {
height: 450px;
width:600px;
position:relative; }
#content #left {
background-color: #999999;
height: 450px;
width: 150px;
position:absolute;
40
top:0px;
left:0px;
}
#content #main {
height: 450px;
width:448;
background-color: #FFFF00;
margin-left:152px;
}
#footer{
height:48px;
margin-top:2px;
width:600px;
background-color: #33CC99; }
该例中定位主要体现在中间部分(content)。 #content {
height: 450px;
width:600px;
position:relative;
}
Content高450px，宽600px，采用相对定位(position:relative;)。其中包含左(left)和右(main)
两个子容器。
左容器与其父容器(content)同高(450px)，宽150px，使用绝对定位: #content #left {
background-color: #999999;
height: 450px;
width: 150px;
position:absolute;
top:0px;
left:0px;
}
左容器与其父容器(content)的左上角对齐(top:0px; left:0px)。
右容器也与其父容器(content)同高(450px)，宽450px，左、右容器宽度之和(150px+450px)
不能超过父容器的宽度(600px)，右容器使用绝对定位: #content #main {
height: 450px;
width:448;
background-color: #FFFF00;
position: absolute;
top:0px;
left:150px;
}
右容器(main)的左上角坐标(top:0px;left:150px;)紧挨着左容器(left)的右上角
41
(top:0px;left:149px)。Main宽度定为448px而不是500px，是因为留出2px以便背景色透出，
形成红色的边框。
用定位法布局还有一些方法，如父容器和左容器参数不变，用右上角坐标系，设定右容
器(main)的右顶点坐标为(top:0px;right:0px;):
#content #main {
height: 450px;
width:448;
background-color: #FFFF00;
position: absolute;
top:0px;
right:0px;
}
再如，父容器和左容器参数不变，通过设定右容器的左边距(margin:150px;)达到布局的
效果。
#content #main {
height: 450px;
width:448;
background-color: #FFFF00;
margin-left:152px;
}
由此可见，达到同样效果的方法是很多的。不论用什么方法，只要效果相同，都是对的。
思考:若用左上、右上、左下、右下角坐标系来布局1-2-1结构页面，代码应如何写。
布局方法2:浮动定位法
body {
margin: 0px;
padding: 0px;
}
#container {
margin:0 auto;
background-color: #ffd8d9;
height: 600px;
width: 600px;
}
#banner {
background-color: #33CC99;
height: 98px;
width:600px;
margin-bottom:2px;
}
#content {
height: 450px;
width:600px;
}
42
#content #left {
background-color: #999999;
height: 450px;
width: 150px;
float:left;
}
#content #main {
float:left;
height: 448px;
margin-left: 2px;
background-color: #FFFF00;
}
#footer{
height:48px;
width:600px;
margin-top:2px;
background-color: #33CC99; }
该浮动法是通过设置父容器(content)的两个子容器(left和main)都左浮动(float:left;)，
从而实现左、右排列布局的。代码如下:
#content #left {
background-color: #999999;
height: 450px;
width: 150px;
float:left;
}
#content #main {
float:left;
height: 448px;
margin-left: 2px;
background-color: #FFFF00; }
同样，用浮动法实现同样的效果，这并不是唯一的方法。我们还可以设置右容器main
右浮动，效果也是一样:
#content #main {
float:right;
width:448px;
height: 448px;
background-color: #FFFF00; }
8.6.2 1-3-1布局
这种布局是分上、中、下3部分，中间再分为左、中、右3部分，故称1-3-1布局，如
图8-42。
43
图8-42 1-3-1布局
HTML结构代码如下:
