设计列表结构_ol li 1.1 1.2-CSDN博客

本文链接：https://blog.csdn.net/qq_41807399/article/details/138509018

实现1.1，1.2的有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ol{list-style: none;}
			li:before{color:#f00;font-family:Times New Roman;}
			li{counter-increment:a 1;}
			li:before{content:counter(a)".";}
			li li{counter-increment:b 1;}
			li li:before{content:counter(a)"." counter(b)".";}
			li li li{counter-increment:c 1;}
			li li li:before{content:counter(a)"."counter(b)"."counter(c)".";}
		</style>
	</head>
	<body>
		<ol>
			<li>一级 1</li>
			<li>一级 2
				<ol>
					<li>二级 1</li>
					<li>二级 2
						<ol>
							<li>三级 1</li>
							<li>三级 2</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</body>
</html>

这里边需要用到计数器，CSS中计数器使用counter-increment实现。他有两个值，分别是计数器的名称，和计数器每次增加的值

定义列表类型

CSS中使用list-style-type定义列表类型，他的值有：
disc 实心圆，默认值
circle：空心圆
square：实心方块
decimal：阿拉伯数字
lower-roman：小写罗马数字
cjk-ideographic:浅白的表意数字
lower-greek：基本的希腊小写字母
hiragana：日文平假名字符
katakana：日文片假名字符
lower-latin：小写拉丁字母
upper-roman：大写罗马数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
none：不使用项目符号
armenian：传统的亚美尼亚数字
georgian：传统的乔治数字
hebrew：传统的希伯来数字
hiragana-iroha：日文平假名序号
katakana-iroha：日文片假名序号
upper-latin：大写拉丁字母

ul{
list-style-type:circle;
}

定义项目符号的显示位置

CSS使用list-style-position属性定义项目符号的显示位置。取值包括：outside和inside
outside：默认值，将列表符号显示在文本行意外
inside：将列表符号显示再文本行以内

list-style-position:inside;

用背景模拟项目符号

先清楚默认的项目符号，然后与踹死列表定义背景图，通过精准的定位显示出炫丽的项目符号。

ul{
list-style-type:none;
padding:0;
margin:0;
}
li{
background-image:url([背景图像地址]);
background-position:left center;
background-repeat:no-repeat;
padding-left:1em;

列表垂直布局

先去掉列表的默认样式，然后再定义列表样式

ul li{
list-style-type:none;
width:300px;
margin:3px 0;
}

列表水平布局

先去掉默认样式，然后通过display将其改为行内块显示进行进行水平布局

ul li{
list-style-type:none;
display:inline-block;
}

为什么不是行类显示呢？
行内块可以设置宽高，而行内不能设置宽高，相比较行内块你叫方便。