用 CSS 替代 HTML 的 table tag 设计网页版面

======================================================
注：本文源代码点此下载
======================================================

版工之前就耳闻 css 功能强大,可完全取代 html 的 table、tr、td 等 tag,做网页「外观 (user interface)」的编排。css 除了可避免陷在 html 多层的巢状 table 里,亦可明显减少网页档案大小,让页面日后可统一维护,而非逐一修改。日前版工找了一些书上的 css 范例,经简单修改并测试后,开放七个 css + div tag 网页排版的「样板」让大家下载 (.html 格式,可直接用浏览器开启),内容如下:

(1) 两栏式版面,画面上的字段宽度可随浏览器自动调整

(2) 两栏式版面,画面上的字段宽度固定,不可随浏览器自动调整

(3) 三栏式版面,画面上的字段宽度可随浏览器自动调整

(4) 三栏式版面,画面上的字段宽度固定,不可随浏览器自动调整

(5) 多栏式版面,画面上的字段宽度可随浏览器自动调整

(6) 多栏式版面,画面上的字段宽度固定,不可随浏览器自动调整

(7) 非对称、字段坐标不固定,画面上的字段位置可随浏览器自动调整

本帖的示例代码下载点:

http://files.cnblogs.com/wizardwu/070915.zip

七个范例中,主要可区分为两大类:

• 页面中的字段,会随使用者的屏幕分辨率、鼠标拖曳浏览器边框,自动延展和调整

• 页面中的字段,宽和高固定,不会随使用者的屏幕分辨率、鼠标拖曳浏览器边框,自动延展和调整

透过 css 对整个 div 区块的统一设定,可让页面外观的编辑和维护工作变得轻松许多。不过有少数 css 的属性设定,需要额外考虑到浏览器的厂牌和新旧版本问题。此外本帖提供下载的多栏式版面范例中,亦要考虑到,当页面其中一栏的图文内容特别多时,是否会照字段的预设宽度往下延伸,抑或图文内容会围绕别的字段;此种情况可能会发生在「非固定栏宽」的页面中,此时就得再引用其它 css 的排版技巧加以调整。

css 除了版面设计功能强大外,还有许多其它的优点。像是要让使用者透过浏览器「打印」网页,传统的做法,开发人员可能会特地替需要打印的页面,重新排版、重写一个适合 a4 纸张打印的页面;但透过 css,我们可以在使用者要打印时,让其自动套用新的 css 样式表,而非 redirect 到另一个专供打印的网页,如此便可省下重新撰写打印页面的时间,及 web server 的硬件系统资源。

-------------------------------------------------

本帖参考书籍:

[1] christopher schmitt,「css cookbook, second edition」, o'reilly 出版社, 2006/10

http://oreilly.com/catalog/9780596527419/index.html

-------------------------------------------------

本帖相关文件:

[1] css tutorial

http://www.w3schools.com/css/default.asp

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/