CSS布局教程

基于web标准的网站设计指南

« CSS文档统筹ie7不支持的过滤器小结 »

列表版式基础

列表在网页布局和排版方面都具有强大功能,是设计师最喜欢选用的元素,因此使用频率相当地高。传统网页布局中列表多用于多行单列的标题信息的排列,由于列表信息比较整齐直观,非常方便浏览者浏览,使用频率仅次于表格。在标准网页布局下,由于CSS定义了强大的列表属性,以及各种浏览器对CSS列表属性的狗空前支持,使列表可以配合div元素实现更多的网页布局。
XHTML列表框架
XHTML支持三种列表形式:有序列表、无序列表和定义列表。
◆有序列表
表中,每个列表项前都标有数字,表示顺序,如1,2,3,或a,b.c等,盒列表用ol元素表示,每个列表项用li元素表示。
◆无序列表
列表中,不用数字标记每个列表项,而采用一个符号表示,如点、圆圈、天津网站建设天津网站制作等。列表用ul元素表示,每个列表项用li元素表示,—般网页都使用这种列表样式。
◆定义列表
定义列表通常用于术语的解析,其中列表用dl元素表示;术语名称用dt出元素表示;术语解释说明用dd元素表示,dd元素能够缩进显示。在早期的网页布局中还有菜单列表menu元素和目录列表dir元素,但已不被标准网页提倡使用,所以我们也就不再详细说明。列表可以嵌套,在列表里可以包含子列表。通常用这种方法,实现多层列表嵌套。
结合列表元素与CSS列表属性,下面我们来设计一个比较复杂的示例。这个示例演示了如何动态控制列表项的显示,即当鼠标经过列表项时,会显示不同的样式,同时显示有趣的提示标志,而鼠标移开后又恢复默认样式。如果当你深入研究列表版式的各种CSS定义属性时,你会发现很多奇怪而又有趣的现象,这些象存在于不同浏览器中。
列表项默认以单列垂直显示,它符合人眼扫描规律,这样可以快速浏览信息。当然列表也可以在行内并列显示,实现的方法有很多种,上述两种方式各有千秋,通过定义块状浮动可以利用和显示一些块元素的属性,如边框、边和补白,来设计更多的修饰效果,但浮动布局容易出现活动、错位等问题;通过定义内联流动功可以像文本一样更容易控制,但缺乏块状元素的表现力。

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号