扔掉原来的思维，完全使用绝对定位的层进行排版

扔掉原来的思维，完全使用绝对定位的层进行排版

作者：贾庆祥

我是一个电脑爱好者，只是凭自己试着做网站的一些感受结合经验教训提出的这个观点，请多包涵。

为什么要扔掉原来的思维？

开始的时候，我们主要是用表格嵌套，相当繁琐，而且不便于网站内容的更新。网页简单（就像Google用表格排版）问题还不大，如果像YAHOO这些门户网站，或是稍微复杂一些的网站，表格排版简直就是寸步难行。如果不信，现在都还可以去看看新浪的首页。

按照《HTML权威指南》的一些观点，网页并不是像word文档这样既有美观又有内容的作品，而是简单的信息传播的载体而已。这就决定了，按照权威指南的观点去做网页、网站，只能够做到版面有条理，仅此而已。我看了此书的出版时间，比较早。但是，大家看看世界著名的门户网站或者稍微大一点的网站就可以知道，现在的网页并不只是传达给人们一个信息而已，还需要美观甚至是炫目。W3C的观点很好，强调内容为主，这其实就否定了原来用表格做网站的思路。因为，那时候，表格根本不是为了表示出一个内容，而是利用技巧和经验用表格做"海报"。

最近，随着Firefox这类支持标准的浏览器的逐步普及（在我看来是这样），越来越多的网站开始兼容标准，开始使用（我也不知道是怎么开始的，譬如YAHOO的重构等）Div与CSS进行网页设计，我比较爱好这个，在【网页设计师】上看了些教程，自己尝试着做了一个网站，感觉还不错，但是还是有些我们需要经验、技巧去让网页看起来很美而不是用最简单的最单纯的代码直接表示出我们的想法。我看了一些网站，所谓利用div和CSS重构过的网站。除了【网页设计师】（和一些介绍网页标准的网站）和一些版面比较简单的网站（比如我做的那个）以外，绝大多数的网站只不过是把表格变成了div，该嵌套的还是嵌套，根本没有从内心理解到内容与修饰的关系，他们还是只重视浏览器展现出来的网站，而不在乎一个div表达的是内容中的那一个部分，不在乎div与内容本身条理的关系。这样的重构不如不构。

我是业余的，我没有时间积累那些让浏览器展现出来的网页看起来很美的技巧经验，我所要的就是希望网页能够像word文档或者AI的设计那样简单，那样及见即所得。我不希望嵌套。我希望内容与网页的结构能否完美结合。

我觉得，有些比较复杂的网站，在用Div与CSS的基础上，我们加上绝对定位，就让本身复杂的网页变得相当简单。不再嵌套，内容与结构可以做到完美结合。一个层就是一个内容块，最大限度的做到及见即所得。2年前我曾经尝试着这样做，那时候好像网上还没有开始掀起重构的热潮，我只是觉得表格排版太让人沮丧，所以我尝试层。那时候我做网页完全是考鼠标点点的傻瓜操作，根本不去管代码，所以，可能是CSS上的问题，导致层的错位、字体溢出等等问题。后来，我用上学的闲暇时间好好看了关于HTML和CSS的文章，觉得大致有了整体掌握，尽管还是很不熟悉（我说过了，我只是业余没有时间），这次我用Div+CSS+绝对定位，重做了Ubuntu的主页，（Ubuntu的主页使用嵌套似的Div+CSS做的）。结果相当满意，页面基本和原来的一样（不可能100%相似），但是我的HTML代码只有5.62 KB原来的HTML代码是10.8 KB。我的CSS代码只有1.17 KB原来的CSS代码有22.4 KB。这就是不同。以下是我进行的比较。

单位KB

由于使用绝对定位和div嵌套的网页会有不一样的图片文件，所以在这里没有比较总的文件大小（我利用的是Ubuntu原有的图片文件）。依然小于div嵌套。

相关资料：

Ubuntu主页文件：

http://www.51files.com/?ATYQ0NB3KFP5M4U3ZAI8

改造的Ubuntu主页文件：http://www.51files.com/?4I8WYX1IZGXPBA17JXHG

我重构的网站文件:

http://www.51files.com/?DTJH4MS3I7UD96M4RLP6

【网页设计师】网站：http://www.w3cn.org/

W3C网站：www.w3.org