<!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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
