搜索引擎友好的DIV+CSS结构

发布时间：2015.08.07 浏览: 次

搜索引擎蜘蛛的工作趋向于线性方式，蜘蛛抓取网页内容的时候会从上到下依次抓取网页上的内容，越简单实用的网页就越受蜘蛛的喜欢。而在网站兴起的初期，网站基本采用框架结构和表格形式来构成网页的基本布局，这使得蜘蛛的线性工作很难抓取网页的具体内容，也很难对网站结果布局进行控制，这不利于搜索引擎优化。而在DIV+CSS出现后，改变了这一不利的局面。

随着网页标记语言的发展，在HTML基础上优化和改进形成了一种新的语言XHTML，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位布局。

DIV+CSS有别于传统的表格（table）定位方式，它可以实现网页页面内容与表现相分离。网站建设者可以控制某一内容在网页的具体位置和表现形式，灵活度更高。而且对于搜索引擎来说，DIV模块化的结构是很容易抓取和分析网页内容的。对于内容量较大的网站来说，使用DIV+CSS更是必然的选择。

如图所示为智者SEO的网站网络创业栏目首页结构布局，我们可以看到网站整体呈模块化布局，结构统一。页面每一行都由3个DIV层组成，例如创业点子、站长新闻、酷站推荐这三个板块的DIV层分别为居中排列，浏览者可以轻松的在网站上找到自己需要的内容。在便于收录的同时，还可提高用户体验和网站的页面浏览量，这是其他网站结构难以达到的效果。由于智者SEO网站DIV+CSS布局代码较多，下面我们只对DIV+CSS布局原理做一些简单的分析。

CSS（Cascading Style Sheets，层叠样式表），用于定义HTML原始的显示形式，是W3C推出的格式化网页内容的标准技术，是控制DIV网站布局的重要工具。

DIV层相对位置控制代码如下：

#left{ width：200px；float：left；background-color：#FFF}

#mid{ width：auto；backgrouond：#00FF00；margin：0 230px；border：1px sollid @ 000；}

#right{ width：200px；float：right；background-color；#CCC}

DIV层绝对位置控制代码如下：

#left{background：#999；width：100px；height：200px；position：absolute；top：0；left：0}

##mid{background：#0CF；height：200px；margin-left：120px；margin-right：120px；}

#right{width：100px；height：200px；position：absolute；background:#693;top:0;right:0}

第一段相对位置控制代码表示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为何能成为目前主流的网站结构布局方式有了一个清楚的了解。

1、DIV+CSS使网站内容更富有层次和条理性，符合搜索引擎抓取网页的习惯。

2、加快页面载入速度。使用margin和padding代替多余的表格单元和间隔图片，相对之下，DIV+CSS结构的页面在代码的字节数比table页面的小几倍以上，在table中药移动1像素的距离就要多出几行代码甚至更多，而在DIV+CSS结构中只需改动一下margin或padding的数值即可实现。

3、降低服务器带宽及流量。虽说现在很多IDC都不限制网站的网络流量，但是带宽都有限制的,CSS样式表在浏览器加载一次后，即可保存在本地而不需要再次加载，对于节省网站服务器带宽有着很大的作用，保证了服务器在多用户请求时的反应速度和用户的流量速度。

4、保持整个站点视觉的一致性。这点对于提高用户体验有很大的帮助。用户不会因为凌乱的网站布局而找到不到自己想要的信息，对于提高网站实用性也有好处。

5、使网站修改是更有效率、代价更低。修改使用table来布局的网页简直是噩梦，机会需要重新编写，而对于DIV+CSS结构的网站，只需要修改CSS样式表里的一些数据就行了，这大大提高了网站修改和改版的效率。

DIV+CSS是网页标记语言的一大进步，它使网站结构布局变得简单，也使搜索引擎内容抓取变得容易。作为一个合格的SEOer，应该了解DIV+CSS的使用，对于网站内部的优化才更得心应手。

赞一个

关键词：搜索引擎 DIV+CSS结构