关键词 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布局的另外一个缺点就是布局信息和样式信息混杂在一起，代码臃肿，不利于结构和表现分离，后期维护起来也比较麻烦。
随着W3C标准化网页布局的日益成熟，DIV+CSS布局被绝大多数web设计师青睐。DIV+CSS的出现弥补了TABLE布局的不足，具有以下三个方面的显著优势：首先，实现了表现和内容相分离。DIV+CSS将设计部分和内容剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息，这样代码的机构也更清晰明了。其次，加快了页面的加载速度。采用DIV+CSS重构的页面大小要比TABLE编码的页面文件小得多，前者一般只有后者的1/2大小，这样浏览器就不用去解析大量冗长的标签。最后，易于维护和改版。DIV+CSS布局使网站版面布局修改变的更简单，因为版面代码都写在独立的css文件里修改起来方便多了，不象Table要在页面中修改很多信息.
基于Table和DIV+CSS的各自优势和不足，现在的网站一般采用两者相结合进行网页的排版布局，一般使用使用CSS+Div方式布局页面的定位、色块、图片等，使用CSS+Table或Ul和Li等这样的元素来显示页面中需要展示的数据。
那么什么是DIV和CSS呢？
Div 英文为division，意思是分开、分割、分块的意思。
CSS（Cascading Style Sheet）译作层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS可以将格式和结构分离，能更好地控制页面布局，从而制作体积更小、下载更快的网页。
一、CSS语法
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：
选择器 { 属性： 属性值； 属性： 属性值； }
属性和属性值之间用冒号（：）隔开，多个定义之间用分号（；）隔开。
例如：
h1 {font-size： 12px；}
例子中将h1字体大小属性为12像素，写成font-size： 12px。
二、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文档中，