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