搜索引擎蜘蛛的工作趋向于线性方式，蜘蛛抓取网页内容的时候会从上到下依次抓取网页上的内容，越简单实用的网页就越受蜘蛛的喜欢。而在网站兴起的初期，网站基本采用框架结构和表格形式来构成网页的基本布局，这使得蜘蛛的线性工作很难抓取网页的具体内容，也很难对网站结构布局进行控制，这不利于东莞搜索引擎优化。而在DIV+CSS出现后，改变了这一不利的局面。
随着网页标记语言的发展，在HTML基础上优化和改进形成了一种新的语言XHTML，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位布局。
DIV+CSS有别于传统的表格(table)定位方式，它可以实现网页页面内容与表现相分离。网站建设者可以控制某一内容在网页的具体位置和表现形式，灵活度更高。而且对于搜索引擎来说，DIV模块化的结构是很容易抓取和分析网页内容的。对于内容量较大的网站来说，使用DIV+CSS更是必然的选择。
如图4.2所示为考试在线的网站结构布局，我们可以看到网站整体呈模块化布局，结构统一。页面每一行都由3个DIV层组成，例如考试报名、成绩查询、报考指南这三个版块的DIV层分别为左、中、右排列在同一行，浏览者可以轻松地在网站上找到自己需要的内容。在便于收录的同时，还可提高用户体验和网站的页面浏览量，这是其他网站结构难以达到的效果。由于考试在线DIV+CSS布局代码较多，下面我们只对DIV+C SS布局原理做一些简单的分析。
CSS（Cascading Style Sheets，层叠样式表），用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术，是控制DIV网站布局的重要工具。
DIV层相对位置控制代码如下：
DIV层绝对位置控制代码如下：
第一段相对位置控制代码表示DIV层分别为#left: float向左浮动，宽度为200像素；#mid:位置居中，宽度自动，左边距为0，右边距为230像素；#right: float向右浮动，宽度为200像素。这样就构成了一个三个DIV层的位置分布，相当于上一级DIV层里的左中右布局。
第二段绝对位置控制代码表示DIV层分别为#left: DIV层距离页面上边和左边都为0，即置顶靠左，position位置属性设置为绝对位置，DIV层宽100像素，高200像素；#mid:DIV层宽200像素，左边距离120像素，右边距离120像素；#right：DIV层距离页面上边和右边都为0，即置顶靠右，position位置属性设置为绝对位置，DIV层宽100像素，高200像素，这就构成了三个位置固定的DIV层左中右布局。
以下为内容页面DIV调用CSS里的样式构成网站的布局的代码：
经过分析DIV+CSS代码是如何实现网站结构布局以后，我们对DIV+CSS为何能成为
目前主流的网站结构布局方式有了一个清楚的了解。
DIV+CSS使网站内容更富有层次和条理性，符合搜索引擎抓取网页的习惯。
加快页面载入速度。使用margin和padding代替多余的表格单元和间隔图片，相 比之下，DIV+CSS结构的页面在代码的字节数比table页面的小几倍以上，在table中要移动l像素的距离就要多出几行代码甚至更多，而在DIV+CSS结构中只需改动一下margln或padding的数值即可实现。降低服务器带宽及流量。虽说现在很多IDC都不限制网站的网络流量，但是带宽都有限制的，CSS样式表在浏览器加载一次后，即可保存在本地而不需要再次加载，对于节省网站服务器带宽有着很大的作用，保证了服务器在多用户请求时的反应速度和用户的浏览速度。
保持整个站点视觉的一致性。这点对于提高用户体验有很大帮助。用户不会因为凌乱的网站布局而找不到自己想要的信息，对于提高网站实用性也有好处。使网站修改时更有效率、代价更低。修改使用table来布局的网页简直是噩梦，几乎需要重新编写，而对于DIV+CSS结构的网站，只需要修改CSS样式表里的一些数据就行了，这大大提高了网站修改和改版的效率。
DIV+C SS是网页标记语言的一大进步，它使网站结构布局变得简单，也使搜索引擎内容抓取变得容易。作为一个合格的东莞SEOer，应该了解DIV+CSS的使用，对于网站内部的优化才更得心应手。
