简单学习CSS网页布局(初学者)
脚本之家
XHTML主要用div标签进行网页的布局，而控制布局的工具是CSS代码，以使网页符合Web标准。所以很多网页设计师把这种布局方法的网页叫做“Div+CSS”网页。其实这是不太准确的说法，因为Web标准不太被行外人士所熟识，导致“Div+CSS”的概念取代了Web标准。
11.1.8 一些高级的div布局技巧
为了满足更多布局的要求，本节特别选择几个常用布局技巧。
（1）右边div元素宽度自适应。本例为并排2个div，其中左边的div为固定宽度，右边div为自适应宽度。常用于文章列表和文章内容的页面布局。在D:\web\目录下创建网页文件（XHTML1.0），命名为div_demo.htm，编写div_demo.htm文件代码如代码11.11所示。
代码11.11 右边div元素宽度自适应：div_demo.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右边div元素宽度自适应</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#one{width:70%;
height:200px;
background-color:#eee;
border:1px solid #000;
float:right;
}
#two{width:50px;
height:200px;
background-color:#eee;
border:1px solid #000;
float:right;
}
</style></head>
<body>
<div id="one">第1个div</div>
<div id="two">第2个div</div>
</body>
</html>
为了更方便看到div的表现，笔者给div设置了浅灰色背景色和黑色边框。在浏览器地址栏输入http://localhost/div_demo.htm，浏览效果如图11.11所示。
笔者特意把2个div设置为向右浮动，第1个div元素为自适应宽度，而第2个div元素为固定宽度。本例为了防止读者的一个错觉，即前面的div浮动后一定在左边，其实左右方向取决于div元素浮动属性的值。
（2）div内容居中。这是很多网站需要用到的居中示例，即保持div包含内容的水平和垂直居中。在D:\web\目录下创建img目录，放入一个jpg格式图片文件，并命名为cs.jpg，在D:\web\目录下创建网页文件（XHTML1.0），命名为div_demo2.htm，编写div_demo2.htm文件代码如代码11.12所示。
图11.11 右边div元素宽度自适应
代码11.12 div内容居中：div_demo2.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div内容居中</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
body,html{height:100%;}
.center{width:300px;
height:250px;
text-align:center;
line-height:250px;
background-color:#eee;
border:1px solid #000;
float:left;
}
</style></head>
<body>
<div class="center">
我在中间
</div>
<div class="center">
<img src="img/cs.jpg" width="120" height="120" />
</div>
</body>
</html>
为了更方便看到div的表现，笔者给div设置了浅灰色背景色和黑色边框。在浏览器地址栏输入http://localhost/div_demo2.htm，浏览效果如图11.12所示。
图11.12 div内容居中
笔者在这里用了text-align属性，即内含内容水平居中，也用了line-height属性，这是行距属性，当设置为div的高度时，其所含内容就垂直居中了。
11.1.9 一个典型的网页布局实例 本节综合前面学习的布局知识，制作比较典型的网页布局实例，先分析这个例子布局的要求。这个例子要求页面有上下4行区域，分别用作广告区、导航区、主体区和版权信息区。而主体区又分为左右2个大区，左区域用于文章列表，右区域用于8个主体内容区。看上去布局区域比较多，用表格布局需要很多行代码才能完成。利用div和CSS可以很好地完成，并且代码比较简练。
根据实例要求作图，并分析布局的结构，从而方便编写div布局的结构代码，笔者做分析图如图11.13所示，并在每个区域做了id命名（#符号开头），以方便div编写。
图11.13 网页布局结构分析
从分析图可以看出整个页面的结构，其中，#top代表广告区、#nav代表导航区、#mid代表主体区、#left代表#mid所包含的左区域、#right代表#mid所包含的右边区域、#bt代表版权信息区。
#right区域包含8个具体内容区，由于这些内容区的尺寸相同，所以在实例中将会使用class选择符作为统一样式，对这个8个区域进行CSS样式指定。根据结构分析图可以编写XHTML部分的结构代码，编写如下：
<div id="top">顶部广告区</div>
<div id="nav">导航区</div>
<div id="mid">
<div id="left">纵向导航区</div>
<div id="right">
<div class="content">内容A</div>
<div class="content">内容B</div>
<div class="content">内容C</div>
<div class="content">内容D</div>
<div class="content">内容E</div>
<div class="content">内容F</div>
<div class="content">内容G</div>
<div class="content">内容H</div>
</div>
</div>
<div id="footer">底部版权区</div>
笔者在8个具体内容区用了同一个class名称的选择符，用于在CSS中指定统一的样式。在D:\web\目录下创建网页文件（XHTML1.0），命名为div_page.htm，编写div_page.htm文件代码如代码11.13所示。
代码11.13 div网页布局：div_page.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页布局实例</title>
<style type="text/css">
* {margin:0px;
padding:0px;
}
#top,#nav,#mid,#footer{width:500px;
margin:0px auto;}
#top{height:80px;
background-color:#ddd;}
#nav{height:25px;
background-color:#fc0;}
#mid{height:300px;}
#left{width:98px;
height:298px;
border:1px solid #999;
float:left;
background-color:#ddd;}
#right{height:298px;
background-color:#ccc;}
.content{width:98px;
height:148px;
background-color:#c00;
border:1px solid #999;
float:left;}
#content2{background-color:#f60;}
#footer{height:80px;
background-color:#fc0;}
</style></head>
<body>
<div id="top">顶部广告区</div>
<div id="nav">导航区</div>
<div id="mid">
<div id="left">纵向导航区</div>
<div id="right">
<div class="content">内容A</div>
<div class="content" id="content2">内容B</div>
<div class="content">内容C</div>
<div class="content" id="content2">内容D</div>
<div class="content" id="content2">内容E</div>
<div class="content">内容F</div>
<div class="content" id="content2">内容G</div>
<div class="content">内容H</div>
</div>
</div>
<div id="footer">底部版权区</div>
</body>
</html>
笔者稍微修改了XHTML部分的代码，选了4个具体内容区加上了id名称为content2的属性，这是为了使这4个区域有不同的背景色。在浏览器地址栏输入http://localhost/ div_page.htm，浏览效果如图11.13所示。
本例综合了前面的布局知识，如居中等。不过，而由CSS代码可得，主体内容区（id名称为mid）的宽度是500像素，高度是300像素。通过分析图可以观察得出以下关系公式：
主体内容区宽度=纵向导航区宽度+具体内容区宽度×4
主体内容区高度=纵向导航区高度=具体内容区高度×2
在CSS代码中，纵向导航区（id名称为left）的宽度只有98像素，高度为298像素。而右边具体内容区（class名称为content）的宽度也只有98像素，高度为148像素，可得：
纵向导航区宽度+具体内容区宽度×4=490（像素）
纵向导航区高度=298（像素）
具体内容区高度×2=296（像素）
主体内容区（id名称为mid）的宽度与高度为什么会与内含的div宽度有偏差？这涉及浏览器解析CSS时对宽度和高度的计算方法，IE7.0浏览器和FireFox浏览器解析div的宽度和高度设置值并不包括边框。由CSS代码可得，纵向导航区（id名称为left）和具体内容区（class名称为content）的边框为1像素粗，所以关系公式应该进一步修改为：
图11.14 网页布局实例
主体内容区宽度=纵向导航区宽度+纵向导航区边框×2+具体内容区宽度×4+具体内容区边框×8
主体内容区高度=纵向导航区高度+纵向导航区边框×2=具体内容区高度×2+具体内容区边框×4
宽度和高度的计算是合理布局页面的很重要的基础，一旦计算有误将导致页面布局混乱。并且针对不同浏览器有不同计算办法，本书示例使用IE7.0浏览器，本书后面章节将学习不同浏览器的兼容性解决办法。
— 注意：在宽度和高度的计算中，IE6.0以前版本的浏览器解析div的宽度和高度设置值包括边框，如果读者使用的是IE6.0以前版本的浏览器，尝试修改宽度值以达到图11.14的效果。