列表的使用及細節

時間 2020-03-04

標籤列表使用細節简体版

原文原文鏈接


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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。