DIV+CSS在计算机网页设计中的运用

楚子漪

【摘 要】互联网发展至今，网络已经成为人们生活的重要部分，各色网站层出不穷，众多网页各有千秋。本文从计算机网页设计中的布局入手，分析了传统网页布局的局限性，介绍了计算机网页中典型的 “DIV+CSS”布局方式。通过对DIV 和CSS 技术的研究，介绍了DIV+CSS布局方法及其优势，为计算机网页设计提供思路。

【关键词】DIV；CSS；计算机网页；布局

一、前言

传统的计算机网页布局的方法主要有框架布局和表格布局。框架布局比较灵活，若有效运用，则能使网页更整洁、清晰。但是，对于内容多、布局复杂的网站，不宜采用框架布局，因为，过多的框架会影响网页下载所需的时间，影响网页的读取速度，而且浏览器对框架结构的兼容性也不是很好。

表格是计算机网页设计制作中的一个重要网页元素，用来对网页进行排版，使页面的信息布局合理、简洁。但是表格排版也存在以下的问题：

1.用表格排版的页面很难再修改或升级。当页面制作完成后，如果要将其中的某些位置对调，那么表格排版的工作量相当于重新制作一个页面。而CSS排版利用position和float属性可以轻松地移动和重新定位各个块，实现让用户动态选择界面的功能。

2.用表格排版的页面在下载时必须等整个表格的内容都下载完毕后才会一次性显示出来，而利用DIV+CSS排版的页面在下载时，各个子块可以分别下载显示，从而提高了页面的下载速度。

3.复杂的表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢，网站的维护和更新困难。

二、DIV和CSS的具体内容

DIV元素是用来为HTML文档内大块的内容提供布局的结构和背景。它是HTML中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。一般我们也叫为DIV层定位。

CSS（cascading style sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS 是 1996由W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使 HTML语言更好的适应页面的美工设计。它以 HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA 等）来设置不同的样式风格。CSS的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。

DIV+CSS布局方式使网页结构和外观相分离，极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV+ CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补，当前国内多数比较著名的网站都利用此类方式方法进布局，给用户带来了全新的体验模式。

三、DIV+CSS设计计算机网页布局

采取DIV和CSS的网页布局结构，首先需要用DIV来分块，定义语义结构；然后用CSS来定位和添加样式，如浮动、位置、对齐属性、加入背景等；最后在这个CSS定义的各个块中添加相应的样式，如文字、图片等。下面通过一个布局实例介绍使用DIV+CSS布局网页的基本方法。

首先，把网页区分成不同的三个区块，包括header、content（其中有main主体区域，并将main主体部分分为两个区域lside和rside）、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML部分文档代码如下：

其次，设置其CSS样式文件代码如下：

#container{margin：0 auto；width：90%；}

#header{height：200px；margin-top：20px；border：2px solid；}

#content{height：500px；width：100%；margin-bottom：10px；}

#main{float：left；width：70%；height：400px；border：2px solid；}

#footer{height：60px；border：1px solid；}

其中，width属性设置为百分比形式，表示当窗口大小发生变化时，页面的宽度也随之变化。container的margin属性为0，auto，表示上下边距为0像素，auto表示左右边距为自动，实现网页的居中显示。main的float属性为left，表示靠左对齐，实现中间两列竖栏的显示效果。border属性为2px solid，表示2个像素宽的实线边框。

四、DIV+CSS布局计算机网页的优点

通过上面DIV+CSS的布局实例，可以看出使用DIV+CSS布局计算机网页给网页设计带来很大的优势，具体如下：

（一）内容与表现相分离

即CSS代码和HTML代码相分离，CSS可以把样式的部分单独的置于独立的样式文件中，而在HTML的文件中只放置网页需要显示的内容，而网页的内容表现的形式则可以完全通过CSS文件来实现，消除了大量的冗余代码，解决页面表现和结构混合在一起的问题。

（二）网站的更新与维护更简易

因为CSS文件能够被多个网页链接或使用，当需要重新布局网站页面时，只要依照区块的内容标记到CSS样式的文件里，寻找到相应的ID，并进行简单的修改即可。不需要在每一个HTML文件中进行重复的设置，使修改页面变得更加简捷，极大地提高了网站更新与维护的效率，节约网站的运营成本。

（三）网页加载迅速

当代码写在了CSS文件中时，让页面体积变小、代码简洁，而且相较于表格嵌套方式而言，DIV+CSS赋予页面更多的独立区域，当要打开页面时，不会在整个页面局限于一个大表格里，而是逐层加载，提升了页面加载速率。

【参考文献】

[1]王俭敏等.CSS+DIV网页样式与布局案例指导[M].北京：电子工业出版社，2009.

[2]张赵辉.3D网络试衣技术的市场应用分析 [J].致富时代，2015.