版工之前就耳闻 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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/111007.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...