<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style>
*{
margin:0;
padding: 0;
}
body{
padding-left: 200px;
}
ol,ul{
width: 500px;
height: 40px;
}
li{
width: 500px;
height: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<!--
列表:
1 ol:有序列表
<ol>
<li></li>
</ol>
1.1 自带的列表符号
1.2 列表符号的位置
1.3 使用图片作为图标
1.4 可以使用list-style:将属性简写,便于优化
2 ul:无序列表
-->
</body>
<h1>列表三个知识点</h1>
<hr><br>
<!--
知识点1:
列表自带的列表符号,是居于外侧的,可以用list-style-position:inside/outside
默认是outsid;
-->
<ol >
<li style="list-style-position:outside;">第个一列表</li>
<li style="list-style-position:inside;">第个二列表</li>
</ol>
<br><hr><br>
<!--
知识点2:
使用图标替代列表符号;
list-style-image:url(路径);
-->
<ol style="list-style-image: url(./images/01.jpg);list-style-position:inside;">
<li>第一个列表</li>
<li>第二个列表</li>
</ol>
<br><hr><br>
<!--
知识点3:
列表自带的四种列表样式属性list-style:none/disc/circle/square
-->
<ul>
<li style="list-style:none;">我是列表 清除样式</li>
<li style="list-style:disc;">我是列表 实心圆</li>
<li style="list-style:circle;list-style-position:inside;">我是列表 空心圆</li>
<li style="list-style:square;list-style-position:inside;">我是列表 方块</li>
</ul>
<br><hr><br>
</html>