# 列表
# 有序列表
有序列表是一列项目,列表项目使用数字进行标记。有序列表始于<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
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
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数量修改)