通过实例学习CSS布局网页
我要评论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的效果。
相关文章
本文主要介绍了css九宫格布局的五种方法，内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现，感兴趣的可以了解下2023-09-18- 在Web开发中，经常会遇到需要将元素水平和垂直居中的情况,今天，将为大家分享几种CSS方法，让你的元素轻松居中，让页面更美观吸引人，感兴趣的小伙伴可以自己动手试一试2023-09-08
- 相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流2023-09-07
最近需要做个换行的布局，本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2022-06-16CSS布局之浮动(float)和定位(position)属性的区别
今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考2021-09-23
这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-21
这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-19
这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-11-27- 这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-10-28
最新评论