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


在网站项目制作中,ul、ol、dl这类列表元素的应用是相当广泛的。但是不同浏览器对它们的解析是有差异的。本文将对这些列表元素的基本特性、各浏览器兼容问题,及它们的常见应用展开探讨。
Ul:无序列表
无序列表最为常用,先来看一个示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style><!--
body {font:9pt/14pt "微软雅黑";}
.box {width:120px; margin:0 auto; border:1px solid #000;}
--></style>
</head>
<body>
<div>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</div>
</body>
</html>
这个示例代码在不同浏览器的效果分别如下:

大家可以看出,这段示例代码里的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代码为:
<dl>
<dt>定义标题</dt>
<dd>定义本身</dd>
<dd>定义本身</dd>
</dl>
<dl>
<dt>定义标题</dt>
<dt>定义标题</dt>
<dd>定义本身</dd>
</dl>
以上三种列表元素便是目前网站中最为常见的了,我们只要了解了各自的特点和针对性,那使用起来就得心应手了。

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

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


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP