列表的使用及细节 


<!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>

　　

posted @ 2019-07-20 16:24  九夏  阅读(183)  评论(0)  编辑  收藏  举报