1.无序列表
结构:
<ul>
<li></li>
</ul>
无序列表案例:
<ul>
<li>儒</li>
<li>释</li>
<li>道</li>
</ul>
结构快速生成快捷键:输入ul>li*3,然后回车
效果图:
无序列表扩展案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<!--代码结构快速生成快捷键:输入 ul>li*3+ul>li+ul>li+ul>li*4 然后回车-->
<ul>
<li>儒</li>
<li>释</li>
<li>道</li>
<ul>
<li>书籍</li>
<ul>
<li>道德经</li>
</ul>
<li>天师</li>
<ul>
<li>张道陵</li>
<li>葛玄</li>
<li>萨守坚</li>
<li>许旌阳</li>
</ul>
</ul>
</ul>
</body>
</html>
效果图:
PS:无序列表默认为一级列表样式为实心圆,二级列表样式为空心圆,三级列表样式为小方块,如果想自己设置列表的样式,可通过list-style来设置。
list-style:circle;(空心圆),list-style:square;(实心圆),list-style:disc;(实心圆,默认样式),list-style:none;(取消列表前样式)。
2.有序列表
结构:
<ol>
<li></li>
</ol>
有序列表案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>种花</li>
<li>钓鱼</li>
<li>下棋</li>
<li>喝茶</li>
</ol>
</body>
</html>
效果图:
PS:有序列表的特点是前面自带数字序号。
3.自定义列表
结构:
<dl>
<dt></dt>
<dd></dd>
</dl>
自定义列表案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<!--代码结构快速生成快捷键:输入 dl>dt+dd*3 , 然后回车-->
<dl>
<dt>购物指南</dt>
<dd>免费注册</dd>
<dd>会员等级</dd>
<dd>常见问题</dd>
</dl>
</body>
</html>
效果图:
PS:自定义列表一般用于网页尾部,dt中可以写小标题,dd中写列表内容。