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

用 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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/111007.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SpringMVC工作原理(比较详细哦)「建议收藏」

    SpringMVC工作原理(比较详细哦)「建议收藏」1.用户发送请求至前端控制器DispatcherServlet(也叫中央处理器).2.DispatcherServlet收到请求调用HandlerMappering处理器映射器3.处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找),生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet.4.DispatcherServlet调用Handler…

  • 好看的ppt网站_全球最大的论坛是哪个

    好看的ppt网站_全球最大的论坛是哪个www.slideshare.net

  • 道具库简介_保鲜库简介

    道具库简介_保鲜库简介作为C++标准不可缺少的一部分,STL应该是渗透在C++程序的角角落落里的。STL不是实验室里的宠儿,也不是程序员桌上的摆设,她的激动人心并非昙花一现。本教程旨在传播和普及STL的基础知识,若能借此机会为STL的推广做些力所能及的事情,到也是件让人愉快的事情。   初识STL:解答一些疑问   1.1一个最关心的问题:什么是STL   “什么是STL?”,假如你对STL还

    2022年10月16日
  • rsyslogd日志管理

    rsyslogd日志管理课程大纲1.日志管理简介2.rsyslogd日志服务3.日志轮替日志管理就是可以保存系统所有的想记录的信息首先要确定服务启动。psaux|greprsyslogd#查看服务是否启动chkconfig–list|greprsyslog#查看服务是否启动rsyslog的配置文件位置:/ect/rsyslog.conf常见日志的作用/v…

  • 当前页面的脚本发生错误如何解决_电脑出现当前页面脚本错误怎么办

    当前页面的脚本发生错误如何解决_电脑出现当前页面脚本错误怎么办第一种方法:可能是由于自己浏览器的版本太低造成的,将自己电脑的ie浏览器版本升级到ie最高版本。(我原先ie9,升级到ie11后,就不会出现这种现象)。第二种方法:1、打开默认浏览器,在“工具”选项中打开中打开“Internet设置”选项。(不同的浏览器Internet设置选项的位置不同,自己查找看看,一般在“工具”选项中可以直接看到)2、在Internet属性界面中,点击高级…

  • centos7 kill程序进程_centos杀死进程命令

    centos7 kill程序进程_centos杀死进程命令经过搜集和整理相关的linux杀死进程的材料,在这里本人给大家推荐本篇文章,希望大家看后会有不少收获。1.kill作用:根据进程号杀死进程用法:kill[信号代码]进程ID举例:[root@localhost~]#psauxf|grephttpd注意:kill-9来强制终止退出举例[root@localhost~]#psaux|grepgaim或者[root@l…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号