美文网首页
HTML中DL、UL、OL用哪个比较好?

HTML中DL、UL、OL用哪个比较好?

作者: 阿布_0caf | 来源:发表于2017-06-02 21:45 被阅读89次


1.背景介绍

ul,ol,dl标签是CSS网页布局中常用的列表元素。

列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来

2.知识剖析

1.ul标签:无序列表始于 u l 标签。每个列表项始于l i标签,此列项目默认使用粗体圆点(典型的小黑圆圈)进行标记。

    无序列表

    无序列表

    无序列表

    无序列表

    2.ol标签:有序列表始于ol标签,每个列表项始于li标签,列表项目使用数字进行标记。

      有序列表

      有序列表

      有序列表

      有序列表

      3.dl标签:dl标签是定义列表,自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

      自定义列表

      自定义列表项

      自定义列表项

      自定义列表项

      注:以上所有的列表项内部都可以使用段落、换行符、图片、链接以及其他列表等。

      常见问题

      3.如何定义ul,ol,dl的样式?

      4.解决方案

      在样式表中用list-style定义

      disc实心圆,默认值

      circle空心圆

      square实心方块

      decimal阿拉伯数字

      lower-roman小写罗马数字

      upper-roman大写罗马数字

      lower-alpha小写英文字母

      upper-alpha大写英文字母

      注:也可以去掉默认样式,设置list-style:none,然后根据自己需要添加不同的样式,比如添加特殊背景图片,使列表显示不一样的风格。

      5.编码实战

      6.更多讨论

      什么情况下用ul,什么情况下用ol?

      ul经常用来实现轮播的小按钮,下拉菜单的各种要用来排列的列表,多个a标签排列等,实用范围非常广。

      而ol因为它的有序属性,用的范围就比较小了,不是一定要用有序来排列的情况下,一般都是用ul

      7.参考文献

      w3school

      http://www.w3school.com.cn/tags/tag_ul.asp


      相关文章

      网友评论

          本文标题:HTML中DL、UL、OL用哪个比较好?

          本文链接:https://www.haomeiwen.com/subject/fxtpfxtx.html