初学者简单学习CSS网页布局

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">

<head>

<title>右边div元素宽度自适应</title>

*{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>

</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">

<head>

<title>div内容居中</title>

*{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>

</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="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的效果。

文章共3页: [1] [2] [3]

更多的初学者简单学习CSS网页布局请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：网页教学网日期：2009-3-2