通过实例学习CSS布局网页

2009-08-14 02:19:55 脚本之家

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="left">纵向导航区</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">

<head>

<title>网页布局实例</title>

* {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="left">纵向导航区</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的效果。

上一页 1 2 3 4 5 6 7下一页阅读全文