CSS+DIV布局技术在网页制作中的应用

吕颍颍

中图分类号：TP393 文献标识码：A

摘要：传统Table布局方式只是利用了HTML的table标签所具有的零边框特性，设计了一个复杂表格结构，但不利于设计和修改。而Web标准的网站设计要求网页的表现与内容分离，使得CSS+DIV布局技术广泛应用，通过具体实例阐述运用CSS+DIV布局技术进行网页制作的流程和方法。

关键词：CSS；DIV；网页制作

传统Table布局方式设计复杂，改版时工作量巨大；表现代码与内容混合，可读性差，不利于数据调用分析；网页文件量大，浏览器解析速度慢如蜗牛。而web标准作为新理论和技术实现的新一代互联网模式，使得CSS+DIV的盒子模型技术逐渐成为主流的网页布局方式。

1 CSS+DIV 布局

1.1使用CSS+DIV进行网页设计的优点如下：

（1）结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。

（2）支持各种浏览器，兼容性好。符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。

（3）简单的修改，缩短改版时间。因为网站的布局都是通过外部的css文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

1.2 CSS+DIV 布局示意

真正的表现与内容完全分离，代码可读性强，样式可重复应用。

用DIV+CSS设计思路：

（1）用div来定义语义结构。

（2）然后用CSS来美化网页，如加入背景、线条边框、对齐属性等。

（3）最后在这个CSS定义的盒子内加上内容，如文字、图片等。

2.CSS规则

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，无论用什么工具软件制作网页，都有在有意无意地使用CSS。

2.1 CSS選择器类型：

（1）标签选择器：指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器（如：body{ } p{ } h1{ } 等等...）。

（2）类别选择器：属用户自定义名称的选择器，可以在XHTML标签中用class=“”为相应标签指派样式。可理解为一类。特点是在文档中允许被重复使用。

（3）Id 选择器：属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，可以在XHTML标签中用id=“”为相应标签指派样式，可理解为一个标识。特点是在网页中，每个id名称只能使用一次。

2.2 CSS语法结构：

选择符{ 属性1：值1； 属性2：值2…… }

例：body { font-size：12px； text-align：center；}

参数说明：属性和属性值之间用冒号（：）隔开，定义多个属性时，属性之间用分号（；）隔开。

3.DIV标签

DIV标签是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

4.使用CSS+DIV布局网页

采用了CSS样式+DIV标签制作实例：

（1）分析构架：画出构架图。头部+2列固定宽度右窄左宽型。（2）模块拆分：分别定义DIV的CSS样式。（3）在网页中插入DIV标签，在DIV中填充网页内容。（4）总体调整：色彩及内容调整，适当修改CSS样式。

4.1 创建html文档

程序代码：

其中DIV用到了嵌套关系。用页面层容器“container”包含头部“header”和主题内容“mainContent”，主题内容“mainContent”又包含了右栏“sidebar”和左栏“content”。在标签内分别输入“网页头部”、“右栏”和“左栏”文字。

4.2创建CSS文档

程序代码如下：

body { font-family：Verdana； font-size：14px； margin：0；}

#container {margin：0 auto； width：550px；}

#header { height：100px； background：#6af； margin-bottom：5px；}

#mainContent { height：300px； margin-bottom：5px；}

#sidebar { float：right； width：150px； height：300px； background：#8af；}

#content { float：left； width：395px； height：300px； background：#cff；}

（1）基本信息“body” body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，设置字体，大小和边界距离。

（2）页面层容器“container” 代码保存后可以看到，整个页面是居中显示的，是因为在“container”中使用了以下属性：margin：0 auto；表示上下边距为0，左右为自动，因此该层自动居中。页面宽度为550像素。

（3）头部“header” 设置头部的背景颜色和高度，同时设置下边距5像素。

（4）主题内容“mainContent” 主体内容可以同时控制右栏“sidebar”和左栏“content”的显示效果。主要是高度和下边距的设置。

（5）右栏“sidebar” 本部分在页面中主要是在主题部分靠右侧第二列固定列宽显示，定义宽度和背景颜色。

（6）左栏“content” 本部分在页面中主要是在主题部分靠右侧第二列固定列宽显示，定义宽度和背景颜色。

参考文献

[1]郑俊生，姜敏.使用DIV+CSS进行网页设计应用研究[J]电脑开发与应用，2008.09.

[2]梁静琳DIV+CSS布局技术在网页设计中的应用[J]武汉工程职业技术学院学报200906