基于DIV+CSS 的网页布局技术应用研究
赵清华
，
林学华
（蚌埠坦克学院研究生队，蚌埠233050）
关键词：DIV ；CSS ；网页布局；网页设计
收稿日期：2010-03-10
修稿日期：2010-04-20
作者简介：赵清华（1984-），男，湖北宜昌人，硕士研究生，研究方向为计算机仿真技术
传统的网页布局设计方法多采用表格嵌套内容的方式来实现，针对传统的Table 页面布局
方式的诸多缺点，引入一种功能更强、灵活性更高的网页布局设计方法———DIV+CSS 技术，给出使用DIV+CSS 布局方法的网页设计应用实例。
摘
要：0引言
使用Table 进行页面布局是传统的网页布局显示
技术，仍是现在最常见的网页制作方法。但是由于Table 布局将网页的表现和内容混杂一起，结构不清晰、内容不完整、代码臃肿、可读性差，带来设计、维护工作量和带宽成本大增等诸多弊病。随着Web 2.0标准化设计理念的普及，国内大多知名网站均采用DIV+
CSS 进行网页的排版布局，从实际应用情况来看，其优势十分明显，已获得业内的广泛认可和应用。
1DIV+CSS 布局实例
DIV+CSS 是一种新的排版布局理念，有别于传统的排版习惯。它将页面首先在整体上进行标记的分块，然后对各个块进行CSS 定位，添加样式，最后再在各个块中添加相应的内容。下面以最常见的三栏式布局为例，简要介绍其布局方法。
1.1整体布局
首先根据网页内容，把网页区分成不同的区块（这里共分为top 、content 、footer 三个区域，分别作为网页的顶部、内容和版权区域），然后在各区块内编写文档，代码如下：
此处显示id "header"的内容
此处显示id "left"的内容此处显示id "main"的内容
此处显示id "footer"的内容
然后分别设置CSS 样式，如下：
*{margin:0px;padding:0px;}
body{text-align:center;padding-top:6px;}
#box{width:800px;margin:0auto;text-align:left;}
#header{height:60px;width:100%;border:1px solid #C63;}#content{height:350px;width:100%;margin-top:5px;margin-bottom:5px;}
#left {float:left;height:350px;width:200px;bor -der:1px solid #06C;}
#main {float:right;height:350px;width:590px;border:1px solid #000;}
#footer{height:90px;border:1px solid #633;}
其中，设置box 的margin 属性的左右为0auto ，实现网页的居中显示。设置left 的float 属性为left ，main 的float 属性为right ，实现中间两个竖栏的显示。为
border 设置边框属性，实现如图显示的边框效果。效果如图1所示。
貋
貛財
1.2ul/li列表显示
在HTML页面中，列表可以起到提纲的作用。列表分为两种类型，一种是有序列表，一种是无序列表。在利用DIV+CSS进行排版时，通常需要使用ul/li列表标签实现并列元素内容的排版。例如：导航菜单、标题列表等，都可以通过ul/li标签来实现。在左边栏里实现菜单列表，代码如下：
CSS样式设置如下：
#left li{list-style-type:none;margin:6px;}
.secret{background:#CF6;height:20px;display:block;}
其中list-style-type属性设置为none，代表列表符号为无，改变list-style-type的属性可以展现各种不同的列表符号，例如星号、圆点以及图片等。效果图如图2所示。
1.3动态链接样式
链接可以说是HTML超文本文件的命脉，HTML 正是通过链接标签来整合分散在世界各地的图像、文字、影像和音乐等信息，所以链接的动态展示也是网页设计中一项十分重要的技术。应用最广泛的有4种链接状态——
—未访问的链接（a:link）、已访问的链接（a:vis-ited）、鼠标指针悬停在链接的状态（a:hover）以及被激活的链接（a:active），在网页设计中，通过定义链接伪类使其呈现这些状态，但必须按照link、visited、hover、ac-tive的顺序进行定义。下面在顶部区域添加导航条，设置链接样式。
图2ul/li列表布局效果图
首先在顶部区域新建两个子DIV区块，分别放置一个banner图片和一个导航菜单列表，然后再编写动态链接，CSS样式设置如下：
#header li{float:left;list-style-type:none;margin:08px;}
#header li a,#header li a:link,#header li a:vi-sited{text-decoration:none;}
#header li a:hover{background-color:#F00;}
#nav{height:30px;text-align:center;padding-top:8px; padding-left:0px;padding-bottom:0px;}
#banner img{width:800px;height:87px;}
效果图如图3所示。
1.4图文混排
图文混排是网页内容排版的的重要内容。下面通过一个简单实例在#main区块内实现图文混排的效果，代码如下：
id="main">
貋貛貢
现代计算机2010.05
现代计算机2010.05
Research on the Application of Web Layout Technology
Based on DIV+CSS
ZHAO Qing-hua
，
LIN Xue-hua
（Brigade of Postgraduate,Bengbu Tank Institute of PLA,Bengbu 233050）
Keywords:DIV ；CSS ；Web Page Layout;Web Page Design
Table is wildly used in the traditional Web layout design,according to the defects of traditional
Web layout designed by table,introduces a more powerful and flexible Web layout style,DIV+CSS,gives practical examples of Web design with this method.Abstract:
使用Table 进行页面布局是传统的网页布局显示技术，随着Web 2.0标准化设计理念的普及
CSS 样式设置如下：
#main h2{text-align:center;color:#F00;margin-top:10px;}#main img{float:left;height:220px;margin:15px;}
#main p{margin-top:15px;padding:2px;font-size:14px;text-indent:2em;color:#03F;}
在CSS 样式中，通过定义图片和说明文字的属性，使两者一起向左浮动，实现图文混排的效果。
效果图如图4所示。
图3动态链接效果图
2结语
笔者经过一段时间的学习与摸索对现有的学科专
业网站进行重构和改写。通过实践深刻体会到采用
DIV+CSS 标准化设计布局带来以下好处：由于内容、表
现、结构彻底分离，使得网站建设人员的分工更加明确，开发维护效率明显提高，改版也变得容易。页面代码精简程度高，页面载入速度加快，不仅节省大量带宽，而且可以提高搜索引擎的搜索程序效率，网页内容也更容易被搜索引擎收录到。响应速度、用户友好性的提高也给用户带来了更好的体验。
图4图文混排效果图
参考文献
[1]侯普秀，王一飞.CSS 入门经典（第二版）[M].北京：清华大
学出版社，2008
[2]杨阳.DIV+CSS 网站布局实录[M].北京：科学出版社，2009[3]陈刚.CSS 标准网负布局开发指南[M].北京：清华大学出版
社，2007
[4]Andy Budd,Cameron Moll,Simon Collision.CSS Mastery -Advanced Web Standards Solutions[M].Springer-Verlag New
York,2006
貋
貛貣下载本文
