列表标签

<ul>无序列表标签
属性

  • type属性 定义无序列表符号形状。不建议使用内联属性，标签样式在css中定义。

<ol>有序列表标签
属性

  • type属性 定义有序列表序号类型
  • reverse属性反序
  • start属性 开始序号

<li>列表项标签

例子
列表标签在轮播图、单排的菜单栏都使用广泛。B站双排的菜单栏使用的是


image.png
列表标签-UA样式表

  1. ul, menu, dir {
  2.   display: block;
  3.   list-style-type: disc;        //该属性可以继承，<li>可以继承该属性
  4.   margin-block-start: 1em;    //不区分文本书写方向，相当于margin-top: 1em（文本从左向右书写方向）
  5.   margin-block-end: 1em;
  6.   padding-inline-start: 40px;        //给列表标记留出显示空间
  7. }
  9. ul, ol{
  10.   counter-reset: list-item;
  11.   -moz-list-reversed: false;
  12. }
  14. ol[reversed] {
  15.   -moz-list-reversed: true;
  16. }
  18. ol {
  19.   display: block;
  20.   list-style-type: decimal;
  21.   margin-block-start: 1em;
  22.   margin-block-end: 1em;
  23.   padding-inline-start: 40px;
  24. }
  26. li {
  27.   display: list-item;        //重要属性。做了以下事情：设置list-style-position，list-style-type（该值会继承父级），::marker 2个属性和1个选择器的默认值
  28.   text-align: match-parent;
  29. }
  31. /* nested lists have no top/bottom margins */
  32. :is(ul, ol, dir, menu, dl) ul,
  33. :is(ul, ol, dir, menu, dl) ol,
  34. :is(ul, ol, dir, menu, dl) dir,
  35. :is(ul, ol, dir, menu, dl) menu,
  36. :is(ul, ol, dir, menu, dl) dl {
  37.   margin-block-start: 0;
  38.   margin-block-end: 0;
  39. }
  41. /* 2 deep unordered lists use a circle */
  42. :is(ol, ul, menu, dir) ul,
  43. :is(ol, ul, menu, dir) menu,
  44. :is(ol, ul, menu, dir) dir {
  45.   list-style-type: circle;
  46. }
  48. /* 3 deep (or more) unordered lists use a square */
  49. :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
  50. :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
  51. :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  52.   list-style-type: square;
  53. }

自定义<div>实现列表样式

.div-ul{                 
  padding-left: 40px;        //给列表标记留空
}
.div-li-1,
.div-li-2{
  display: list-item;     //默认设置list-type属性（默认是实心圆），以及::marker          
}
:is(.div-li-1, .div-li-2)::marker{           
  color: red;
}

自定义列表标签

<dl>definition list 自定义列表
<dt>definition term 列表项目名
<dd>definition details 列表项目描述

自定义列表标签-UA样式表

dl,
dt,
dd{
  display: block; 
}

dl{
  margin-block-start: 1em;
  margin-block-end: 1em;
}

dd{
  margin-inline-start: 40px;
}

例子

<dl>
    <dt>html</dt>
    <dd>超文本标记语言</dd>
    <dt>javascript</dt>
    <dd>脚本语言</dd>
    <dt>css</dt>
    <dd>描述网页样式</dd>
</dl>