e_shiny的博客

很多从table布局转型到DIV+CSS布局的同行们都很不习惯，大部分人还是坚信：我为什么要转型，table布局不是照样能写页面？

我并不想反驳，因为table布局也有自己的好处，起码可以节省开发时间（如果你table布局比较熟练的话）。但如果你选择了DIV+CSS那么你就不要用table的思想来布局。

我碰到过许多用table布局思想的人来写DIV+CSS，总结以下几点

1.没有语意

a.图片语意。

使用DIV+CSS的时候你要明白，什么是装饰图，什么是内容图，例如BANNER、产品图片，这些是想要给用户看的，属于内容图，那么你就要用<img>标签来引用它，并且加上alt属性，这样你的图片就可以被搜索引擎收录了。例如一些修饰性的圆角，背景，那么你就要用容器的CSS背景background来做。

许多table布局思想的人做的页面都会多出如：圆角图片、一个透明的1px gif图片等等,这些尽量不要出现，会增加页面的HTTP请求，增加服务器负担。

所以这里我要强调，当你使用背景的时候，尽量把图片切入一张图中，使用background-position来定位显示的位置，这个很重要，几乎所有门户网站都这样做了，例如新浪的背景图片：新浪首页背景图新浪背景图,这里提供一个关键词：css sprites。

b.标签语意。

许多人刚写DIV+CSS的时候都会犯个错误，那就是滥用DIV，你会发现他的页面只有DIV，或许就UL、li、A。

标签语意在搜索引擎中让你的网站的排名靠前起到很重要的作用，如标题使用h1\h2\h3\h4\h5\h6，无序列表使用ul\li，有序列表ol\li，当然你也可以使用dl,dt(标题),dd(内容)来写，等等，xhtml提供了很多的标签，每种标签都有语意。

这里有篇关于标签语意的表格，供大家参考：HTML语意规范

2.嵌套错误

这里要批评下百度知道http://zhidao.baidu.com/browse/74 头部列表是个table，当然这样做并没有什么问题，但是它在td中嵌套了一个li,这是个嵌套错误，li只能存在于ul/ol下，显然百度并不会故意去犯这样的错误，因为在IE6/7下浮动的li的项目符号会无法显示，这个BUG一直令我费解，这也可能是百度的无奈之举吧。

而往往初学者更多的是a里面有div ，span里有ul这样。

这里有篇关于嵌套规则的相关文章：HTML嵌套规则

3.浏览器兼容

当别人发我一个网站的时候，我都会用火狐去打开它，一是可以看它的兼容性，二是可以用firebug看其代码是否语意，如果有漂亮的图片也可以直接拿下来用。

浏览器兼容性应该是DIV+CSS最重要的，有人说，火狐用户量这么少，直接可以无视了，IE的用户群多么庞大云云，这些话都是扯淡！

火狐是标准浏览器，IE6、IE7是不标准的，独立的，且用户群庞大的存在。而标准浏览器有哪些呢：chrome（谷歌浏览器）、safari（MAC）、opera、甚至IE8！当你的页面在火狐下调试通过后，其他浏览器基本不会出现什么大的问题，而IE6、IE7下可能是乱七八糟的。

这里我推荐新人用IE6当主测，因为IE6存在着许许多多莫名其妙的BUG，边写边测，就可以尽量避免这些BUG，例如双倍MARGIN，而火狐下出现的不兼容往往都是没有清除浮动造成的。