# 列表

# 有序列表

有序列表是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签

<ol>
    <li>嘻嘻嘻</li>
    <li>哈哈哈</li>
    <li>嘿嘿嘿</li>
</ol>

<!--
呈现:
1.嘻嘻嘻
2.哈哈哈
3.嘿嘿嘿
-->
1
2
3
4
5
6
7
8
9
10
11
12
  • type属性

    <ol>的属性type拥有的选项:

    • 1 表示列表项目用数字标号(1,2,3…)
    • a 表示列表项目用小写字母标号(a,b,c…)
    • A 表示列表项目用大写字母标号(A,B,C…)
    • i 表示列表项目用小写罗马数字标号(i,ii,iii…)
    • I 表示列表项目用大写罗马数字标号(I,II,III…)

    例:

    <ol type="A">
        <li>嘻嘻嘻</li>
        <li>哈哈哈</li>
        <li>嘿嘿嘿</li>
    </ol>
    
    <!--
    呈现:
    A.嘻嘻嘻
    B.哈哈哈
    C.嘿嘿嘿
    -->
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  • 有序列表嵌套

    列表是可以进行嵌套的

    <ol type="A">
        <li>嘻嘻嘻</li>
        <li>
            <ol>
                <li>啦啦啦</li>
                <li>呜呜呜</li>
            </ol>
        </li>
        <li>哈哈哈</li>
        <li>嘿嘿嘿</li>
    </ol>
    
    <!--
    呈现:
    A.嘻嘻嘻
        1.啦啦啦
        2.呜呜呜
    B.哈哈哈
    C.嘿嘿嘿
    -->
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

# 无序列表

无序列表是一个项目的列表,此列表使用粗体圆点进行标记

无序列表比有序列表用的多,可实现导航栏效果

无序列表始于<ul>标签。每个列表项始于<li>标签。

<ul>
    <li>嗯嗯</li>
    <li>哦哦</li>
</ul>
1
2
3
4
  • type属性

    <ul>的属性type拥有的选项

    • disc 默认实心圆
    • circle 空心圆
    • square 小方块
    • none 不显示
  • 无序列表嵌套

    列表是可以进行嵌套的

    <ul type="disc">
        <li>嗯嗯</li>
        <li>
            <ul type="circle">
                <li>呃呃</li>
                <li>呵呵</li>
            </ul>
        </li>
        <li>哦哦</li>
    </ul>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

快速生成 ul+li 的布局:ul>li*3(数字根据自己需要的li数量修改)

上次更新时间:: 3/1/2025, 11:50:45 PM