网页设计中的DIV+CSS布局技术运用研究

【摘要】文章中以DIV+CSS布局技术在网页设计中的运用为重点，对其具体的运用方法进行了探讨，从而得出DIV+CSS布局技术对于网页设计的重要推动意义。

【关键词】网页设计；DIV+CSS布局技术；图层；运用

一般情况下，网页设计主要是以Table形式为主，其主要原因在于Table在布局设计上具有一定的简便性、操作简便、速度快的特点。网页设计人员可以利用图像编辑器对图片进行剪切等操作，在编辑器中形成最终成像。但是Table的源代码较为复杂，且页面经常和Table混杂在一起，导致信息的查询十分困难[1]。DIV+CSS布局技术应用很好的解决了这一问题，不仅提升了网页的浏览速度，同时也将传统网页格式进行了优化，实现了CSS共享。文章中主要针对DIV+CSS布局技术在网页设计中的运用进行了思考。

1 DIV+CSS布局技术

1.1 DIV技术

所谓DIV+CSS布局技术，也就是在XHTML网站中得以应用的布局技术，这一技术脱离了传统的Table技术，通过DIV+CSS的形式完成各个网页中的定位。其中DIV元素主要是为HTML文档提供结构与背景的元素，DIV元素能够将文档分割成几个不同意义的模块，而DIV中的起始标签与结束标签之间所涵盖的所有内容，都是组成该模块的主要元素，这些元素属性是受DIV标签属性影响进行控制的。

1.2 CSS

CSS为层叠样式表，主要作用于网页样式的控制，也是分离样式信息和网页内容的标记性语言，通过CSS的运用，能够将页面布局进行很好的控制，并实现结构和格式分离，从而通过相关技术的运用制作下载速度更加快捷、体积更小的网页。

1.2.1 CSS语法

CSS的基本语法为 Selector{Property： value；}，Selector为选择符，Property是该命令的基本属性，value是具体数值[2]。Property和value之间需要以冒号分隔开，如果出现多个定义的现象，需要用分号进行分隔，例如下列CSS语法：

2 DIV+CSS布局技术在网页设计中的运用

DIV+CSS布局技术在网页布局中加以运用，首先要划分基本区块，一般是将网页划分为几个模块，并分别设置各个模块中的具体内容，例如页面头部、页面主要内容、页脚等；其次需要利用ul/li元素显示网页信息列表，ul/li元素可以完成网页结构化列表的划分，并且主要运用于网页导航菜单设置、主要新闻标题列表与信息等元素[3]；最后，进行动态链接设计。动态链接在网页设计中的一个重点内容，通常链接主要分为以下几种不同的状态，即a：link、a：visited、a：hover、a：active，这几种状态分别表示的是默认状态、访问过状态、鼠标经过状态以及激活状态。对其进行定义时，若要全部定义，那么定义的顺序将不能随意更改，也就是以link、visited、hover、active的顺序进行定义。

将DIV+CSS应用于网页设计中，也可以将该布局技术作为网页设计的基准，辅以相应的设计手段，实现网页的设计。在设计的过程中，一般体现为以下几点内容：① 改变传统的网页制作思路。以往进行网页设计时，要先对网页的外观进行全面的考虑，协调色彩搭配的合理性与美观性，而运用DIV+CSS布局技术之后，则是要实现对页面内容语义以及结构进行考虑。所以，在DIV+CSS布局技术的运用过程中，设计人员要将传统的设计观念转变。② 转变设计重点。运用DIV+CSS布局技术，会降低Table所发挥的功能作用，将作为基础元素应用于网页的设计，也就是作为显示组织数据用，无法再作为网页布局主要工具发挥作用。所以，设计人员在进行网页设计的过程中，需要转变设计重点，将目光放在DIV+CSS布局技术中。尽管CSS一直以来都是网页设计中的重要内容，然而其主要作用只是加强网页特殊效果，在转变设计重点之后，CSS元素可以应用于网页的布局设计，这也为加深设计人员对DIV+CSS布局技术的理解发挥了重要作用。另外，XHTML语言也是网页设计中的重点内容，在运用DIV+CSS布局技术之后，网页布局的代码需要手工编写，所以，设计人员也要能够熟练的运用XHTML语言。

结束语：

DIV+CSS布局技术在网页设计中加以运用，不仅能够突破传统设计中存在的局限性，同时也可以优化网页设计格式，在原有的基础上将网页内容与排版进行优化。文章中从网页设计的几个阶段，对 DIV+CSS布局技术在其中的运用进行了阐述，希望能够为今后网页设计带来更大的优势。

參考文献：

[1]郑宁宁. 浅析DIV+CSS网页设计技术[J]. 山东省农业管理干部学院学报，2008，06：169-170.

[2]刘军华，陶永进. DIV+CSS网页布局技术中盒子模型的应用研究[J]. 长沙通信职业技术学院学报，2012，04：35-39.

[3]李双远，李阿辉. DIV+CSS技术在网页布局中的应用实现[J]. 吉林化工学院学报，2014，03：90-93.

作者简介：

郭亚东（1973-），女，汉，北京，讲师，硕士，从事计算机信息管理，数据分析，软件开发与设计的研究。