DIV+CSS

从接触Web页面设计制作以来,一直使用的是Table做布局定位,CSS只是被我用来初始化页面元素,并没有用它来布局与定位,而DIV也只是被我用来当做辅助工具用;虽然在大四那年就听说了DIV+CSS,而且还知道这是Web2.0的标准之一,但那时候忙着毕业论文、喝酒、散伙,没时间来研究,所以,对这个“伟大的组合”没有太多认识。

现在我的软件站需要改版,改版的同时,我也实验了一回DIV+CSS。

说实话,DIV+CSS乍用起来比Table要麻烦许多,每一个不同的DIV都要被定义,在写首页CSS的时候,那叫一个麻烦;当然,跟大站的CSS文件比起来,我写的量简直就是九牛一毛… 而且由于是第一次用这个组合,加上对CSS定位的一知半解,费了不少劲儿。为了能做到与主流浏览器兼容,我按了三个浏览器:IE6.0、Firefox1.5和Opera9.0,做的时候三个都打开,一个一个测试。不过期间比较有意思的是,Firefox和Opera在大部分时间里显示正常,出错最多的竟然是我认为兼容性最高的IE,着实让我这个CSS菜鸟郁闷了一把。不过还好,最终还是搞定了IE。

在为软件站改版的过程中,我对于三大浏览器的“不兼容”也有了比较理性的认识,同样一个CSS句子,在IE和FF下,差别要多大有多大,有的时候简直能把人气疯;而其中最头疼的莫过于“DIV的宽度”。不过话说回来,还是自己对标准的语句不熟悉,写出的句子不符合W3C的要求,虽然说IE的“兼容性”强,但在“较真儿”的Fierfox和Opera下,立马就显了原型。

改版完了,对于DIV+CSS的几点感受就是:

1. 页面代码少了,简单了,过去用Table需要十几kb的页面,现在几kb就能搞定。2. 初期写CSS时比较费时,但在以后的修改或改版中,工作量要少很多很多,可谓“牵一发动全身”。3. 表现和内容相分离,DIV做内容,用CSS来表现,分工明细,容易理解。4. “兼容性”好,一般情况下,写出来的页面在三个浏览器中都能表现一致,不会错误。5. 据说(我没有论证)这样结构的站点很容易被搜索引擎收录,提高访问量。

但并不是说在任何情况下都选择DIV+CSS,像我们大学时期宿舍的老大,他就喜欢用photoshop设计完后直接切割输出,直接就是Table+图片,这也很好,而且在不同浏览下也不会出现错位。不过,现在,我还是喜欢上了DIV+CSS,也会多花点时间去研究这个“伟大的组合”。

这里是几个国外的CSS站点聚合,完全使用DIV+CSS,而且页面设计绝对漂亮,有兴趣的朋友可以去看看:

  1. http://www.cssreboot.com/gallery/
  2. http://www.cssbeauty.com/gallery/
  3. http://www.w3csites.com/sites.asp
  4. http://cssvault.com/gallery.php

Leave a Reply

Your email address will not be published. Required fields are marked *