实现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;
}
为什么不是行类显示呢?
行内块可以设置宽高,而行内不能设置宽高,相比较行内块你叫方便。