浅谈列表元素ul,ol,dl的应用

在网站项目制作中,ul、ol、dl这类列表元素的应用是相当广泛的。但是不同浏览器对它们的解析是有差异的。本文将对这些列表元素的基本特性、各浏览器兼容问题,及它们的常见应用展开探讨。

Ul:无序列表

无序列表最为常用,先来看一个示例代码:

1. 无序列表

2. 无序列表

3. 无序列表

这个示例代码在不同浏览器的效果分别如下:

大家可以看出,这段示例代码里的ul是没做任何样式修饰的,由此可见,在默认设置下的无序列表在不同浏览器里显示是有差异的,而且这差异还是比较大的。介于此,我们通常会在CSS中将UL进行重置,即:ul {margin:0; padding:0;},这样便成了如下效果:

可以看出列表内容显示已没有什么差异,唯一差异在于列表的项目符号,原本可显示正常的IE6下现在直接不显示了,而其他几个浏览器显示也不尽相同。这个项目符号可以由特定的css属性list-style-type,list-style-position和list-style-image来控制和改变。list-style-type设置了列表项目符号的类型,list-style-position设置了列表项目符号标记的位置,list-style-image设置了列表项目使用图片代替标记。

这三个属性我们通常使用list-style来合并缩写。list-style-type的属性值多达十余个,如:armenian、circle、decimal、georgian、decimal-leading-zero、lower-alpha等,大家可以在上面的示例中添加此属性及其各值来查看页面效果。基于不同浏览器和操作系统,有些list-style-item值可能显示有差,通常默认为十进制数值,另外我们不推荐用无序列表实现递增数值,因为既然是无序列表,我们再给其赋予递增数值,这显然违背了其本身的语义。

list-style-position默认值是outside,我们也可以设置为inside,这个从语义上就很容易理解,即项目符号标记的位置是在外侧还是内侧。

list-style-image是将项目标记符号设置为自定义的图片,但我们是极少用到它的,因为此方法存在不少bug。要想达到这个目的,其实有个更好的办法,也是我个人比较常用的。即将自定义图片作为背景图片(background-image)赋予li元素上,再设置background-position来调整图片位置,并设置background-repeat为no-repeat即可。通常我会给li设置一个左填充即padding-left,来配合使用,使效果美观且统一。这个方法在各个浏览器上可谓是百试不爽,相当好用。

Ol:有序列表

有序列表与无序列表的唯一区别就在于有“序”,当列表项目的每个列表项目前面需要一个递增值的时候使用(例如1,2,3等),即有序列表的默认项目标记是递增数值。除此外,有序列表的list-style-type属性值与无序列表下的值是通用的。因此,若非需要列表项目标记为递增数值,我们是不建议使用有序列表的,尽管可以设置为无序样式,因为如果这样,有序列表本身的语义就失去意义了。

Dl:定义列表

许多人对定义列表都不熟悉,其实它也是比较常用且好用的。定义列表是用来标记已经定义的列表项,由两部分元素组成,包括定义标题(dt)和定义本身(dd)。定义标题和定义本身并不一定要一对一匹配,可以是一个(或若干个)定义标题多个定义本身,也可以是多个定义标题一个(或若干个)定义本身。如图:
这段HTML代码为:

定义标题
定义本身
定义本身
定义标题
定义标题
定义本身

以上三种列表元素便是目前网站中最为常见的了,我们只要了解了各自的特点和针对性,那使用起来就得心应手了。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

Our Client Satisfaction

Rating for previous quarterr

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2019. All rights reserved.
string(41) "marketingTrackingStrategy function call-A" TOP