网页设计中DIV+CSS的应用探索

摘 要 DIV+CSS是当前较流行的一种网页布局方式，本文介绍了DIV+CSS的特点，并通过举例说明了DIV+CSS常用的语法和常用选择器的用法。

关键词 DIV CSS 布局 网页

DIV + CSS web design applications to explore

Pang Yange Ma Guojie YuBin WangJuan

（CangZhou Medical College， CangZhou，HeBei，061000）

Abstract DIV+CSS is a popular website layout，this paper introduces several features of DIV+CSS，and illustrates the DIV+CSS common syntax and usage of common selector.

Key words DIV CSS layout，web

随着电子信息技术的进步，网络技术也发生着日新月异的变化，Web标准的不断更新，网页从结构（Structure）、表现（Presentation）和行为（Behavior）三方面的标准也在与时俱进地发展着。网页的内容是页面实际要传达的真正信息，所有这些用来改变内容外观的东西，我们称之为表现，行为就是对内容的交互及操作效果。网页作为网络内容的组织形式和表现方式，网页开发技术也在发生着飞速的发展，这种变化一方面体现在网页表现形式上，另一方面体现在网页的组织（布局）方式上。

早期的网页布局，一般是采用表格（TABLE）布局，因为用TABLE进行布局方便直观，而且制作速度快，比较易于学习。设计者可以直接通过firework之类的图像编辑器画图、切图，最后再由图像编辑器自动生成表格布局的页面。但用TABLE布局的页面，也有很大的局限性，主要表现在：一方面是网页显示速度慢，由于html文件中的table标签的浏览速度较慢，Table会阻挡浏览器渲染引擎的渲染顺序，显示图片时需要你把单个、有逻辑性的图片切成多个图，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。另一方面在于Table布局的另外一个缺点就是布局信息和样式信息混杂在一起，代码臃肿，不利于结构和表现分离，后期维护起来也比较麻烦。

基于Table和DIV+CSS的各自优势和不足，现在的网站一般采用两者相结合进行网页的排版布局，一般使用使用CSS+Div方式布局页面的定位、色块、图片等，使用CSS+Table或Ul和Li等这样的元素来显示页面中需要展示的数据。

那么什么是DIV和CSS呢？

Div 英文为division，意思是分开、分割、分块的意思。

称为区隔标记。用于设定字、画、表格等的摆放位置。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它可以将文档分割成多个有意义的区域或模块，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制。

CSS（Cascading Style Sheet）译作层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS可以将格式和结构分离，能更好地控制页面布局，从而制作体积更小、下载更快的网页。

一、CSS语法

通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：

选择器 { 属性： 属性值； 属性： 属性值； }

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

例如：

二、CSS选择器

CSS样式的强大、灵活首先体现在选择器上。主要包括类别选择器、标签选择器、ID选择器、伪类选择器等，灵活选用选择符是布局的基础，这里介绍几种基础的选择符。

（1）类别选择器

在 CSS 中，类选择器以一个点号显示。

例如 .center {text-align： center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

This heading will be center-aligned

This paragraph will also be center-aligned.

（2）属性选择器 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例如

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color：red；}

（3）ID选择器

id 选择器以 "#" 来定义。

下面的 id 选择器，定义元素的颜色为红色

#red {color：red；}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，

这个段落是红色。

（4）伪类选择器

以锚伪类为例，在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a：link {color： #FF0000} /* 未访问的链接 */

a：visited {color： #00FF00} /* 已访问的链接 */

a：hover {color： #FF00FF} /* 鼠标移动到链接上 */

a：active {color： #0000FF} /* 选定的链接 */

三、CSS盒子模型

CSS的盒子模式是DIV+CSS网页布局的核心。传统的表格布局是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS布局后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。盒子模型主要具有4种属性：内容（content）、边框距（padding）、边界（border）和边距（margin）。

4 DIV+CSS应用实例

（1） 利用div+CSS进行布局

在上面的实例中，把页面分成头部、主体、尾部三个部分，xhtml文档是结构文件，style1.css是要是文件，控制页面的表现形式，结构文件和样式文件通过 联系在一起，就这样实现了结构和样式的分离。

（2） 利用ul/li实现列表显示

在本实例中，ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列表表现的属性，常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。Xhtml文档中，

，在右侧的演示文件中，#navigation指明定义了一个叫做navigation的样式。

随着DIV+CSS布局的普及，代码更加清晰，页面代码进一步的精简，降低了网页的体积，从而提高了网页的加载速度。当然DIV+CSS的使用是建立在完全的手工编写代码的基础上，需要学习者熟练的掌握XHTML语言，需要从基础代码编写开始，一步一步才能掌握DIV+CSS的应用。

参考文献：

[2]张伟宏，陈正栋.浅谈DIV+CSS与TABLE布局[J].福建广播电视大学学报，2012，（06）：94-96.