新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> javascript >> HTML CSS列表元素ul,ol,dl的研究与应用

HTML CSS列表元素ul,ol,dl的研究与应用

查看次数10290 发表时间2014-03-10 15:48:16

一、可以看做废话的前言HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性...

一、可以看做废话的前言
HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。

对初学者或是有一定CSS方面经验的同行们应该会有帮助的。

二、HTML中可用的列表元素
1、无序列表:ul
无序列表是最常使用的列表,下图显示了无序列表在不同浏览器下的显示:
不同浏览器下无序列表的表现

demo页面

正如上面显示的,无序列表在不同浏览器下的默认设置是由些许差异的。当然,在如今实际的网站项目上是很少看到没有任何修饰的无序列表了。其中原因之一就是CSS的重置(css reset),已经将无序列表默认的列表项目符号,margin或padding都去掉了。

无序列表的一些特定的css属性有list-style-type,list-style-position,和list-style-image。这些属性设置了列表项目符号的类型,标记的位置,以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

list-style-type属性可以设置为一些不同的值,下面图表展示的就是部分值的页面效果:
list-style-type不同值的表现

依赖于用户的浏览器及操作系统,某些list-style-item值可能不能正确显示,通常默认为十进制数值,用无需列表实现递增数值是不推荐的,因为这样“无序列表”其本身的语义已经不复存在了。

list-style-position针对于列表标记的位置,可以被设置为outside(默认)或是inside。如果list-style-image被设置的话,其也会影响图片的位置。

list-style-image属性可以给无序列表一个自定义的独一无二的表现,不幸的是,在IE下使用此方法添加项目编号是bug多多,故很少被使用。一个更好的解决方法是添加background image到列表的li元素上,并相应的调整background image的位置,并设置为no-repeat。在maxdesign.com上,已经通过分步讲解演示了这个方法,而且在所有的浏览器下都工作良好。

2、有序列表:ol
有序列表在当列表项目的每个列表项目前面需要一个递增值的时候使用(例如1,2,3等)。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下,有序列表要么前面是个递增数值,要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样,有序列表本身的语义已经不正确了。
有序列表使用的实例截图

3、定义列表:dl
定义列表用来标记已经定义的列表项,它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配,下面的代码在严格的XHTML下是完全合法的:

<dl>
	    <dt>无线音乐咪咕汇 </dt>
	    <dt>哥本哈根会议</dt>
	    <dd>《十月围城》</dd>
</dl>

这样,您可以在单个dd下面使用多个dt,也可以在单个dt下面使用多个dd。

定义列表的视觉显示,默认情况下,各个浏览器的显示几乎是一致的,如下图所示:
dl定义列表在Firefox下的显示

demo页面

上图对应的HTML代码如下:

 <dl> <dt>标题 </dt> <dd>这里是定义的内容 </dd> </dl>
 <dl>
     <dt>热门电影 </dt>
     <dd>十月围城 </dd> <dd>刺陵 </dd> <dd>三枪拍案惊奇 </dd> <dd>阿凡达 </dd>
 </dl>
 <dl>
     <dt>

(转发请注明转自:学PHP)    


  相关推荐



1楼 Lorraine说: 2016-12-12 11:15:45
Haaaahhh. I'm not too bright today. Great post!

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: