Blog

浅谈列表元素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

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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