采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点，就在今天下午，IT168首页改版就选择了这种做法。其实，早些时候像阿里巴巴、163等大型门户站点就已经完成了重构工作。Robin早在去年就已经有了使用CSS+DIV来编写网页源码的习惯了，个人感觉这种方法确实比传统的TABLE形式的源码架构强多了。
很多SEO技术爱好者不是很明白CSS+DIV与TABLE相比到底有什么好处而来向我咨询，今天我来统一回答:)
根据我个人将近一年的网页编写经验，采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：
1：表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。
2：提高搜索引擎对网页的索引效率
用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。
3：提高页面浏览速度
对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。
4：易于维护和改版
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。既然是这样，那为什么不从现在开始就学习并掌握CSS+DIV的网站重构方法呢？
作者：robin
转载请注明出处
使用DIV+CSS的时候最常见的就是这个问题，DIV+CSS如何横向居中呢？这个问题在使用table布局网页的时候是非常容易实现的，可是使用DIV+CSS的时候就会出现问题了。当然，前提是指你的布局包含在一个层中。就如同这样：
wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}[/code]
但是IE5是不支持这个定义的。解决的办法可以是这样：
[code]body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 是规则定义IE5/Win中body的所有元素居中，而其他的浏览器只是代表文字居中，然后再用第二个text-align:left;将#warp中的文字居左。
[More...]
前两天我写的一篇文章里说过，要提高网站执行效率，就要从各种细节入手。其中，CSS的简写在节省代码方面虽然没有table布局改为div那么客观，不过也是一个不能忽略的方面。下面总结一下CSS的一些简写方法：
外补丁(margin)的简写：
比如：margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成：margin:10px 20px;
或者：margin:10px 20px 10px 20px;
再或者：margin:10px 20px 10px;
注意：简写后的顺序是“上-左右-下”，“上-右-下-左”，“上下-左右”
内补丁(padding)的简写：同上
颜色的简写：
比如：color:#FFFFFF
可以写成：color:#FFF
或者：color:white
边框的简写：
比如：border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成：border:1px solid :#FFFFFF;
或者写成：border:1px solid :#FFF;
[More...]