小课堂【萌新】

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

分享人:赖骏锋

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

ul,ol,dl标签是CSS网页布局中常用的列表元素。 列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来。

2.知识剖析

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

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

    1. 有序列表
    2. 有序列表
    3. 有序列表
    4. 有序列表

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

    自定义列表
    自定义列表项
    自定义列表项
    自定义列表项

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

    3.常见问题

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

    4.解决方案

    在样式表中用list-style定义

    disc实心圆,默认值 circle空心圆 square实心方块 decimal阿拉伯数字 lower-roman小写罗马数字 upper-roman大写罗马数字 lower-alpha小写英文字母 upper-alpha大写英文字母

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

    5.编码实战

    demo

    6.扩展思考

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

    ul经常用来实现轮播的小按钮,下拉菜单的各种要用来排列的列表,多个a标签排列等,实用范围非常广。 而ol因为它的有序属性,用的范围就比较小了,不是一定要用有序来排列的情况下,一般都是用ul

    7.参考文献

    参考一

    8.更多讨论

    鸣谢

    感谢大家观看

    By 赖骏锋