8.（初级）web字体之：装饰列表

一、无装饰列表符号

list-style:none;

二、装饰列表<ul>、<ol>

list-style-type:disc（实心圆）/circle（空心圆）/square（实心方形）;

三、装饰列表<ol>

list-style-type:

decimal（1. 2. ...）

decimal-leading-zero（01. 02. ...）

upper-alpha（A. B. ...）

lower-alpha（a. b. ...）

upper-roman（I. II. ...）

lower-roman（i. ii. ...）;

四、设置装饰列表符号位置

list-style-position:outside（默认）/inside

                                                              

list-style-position:outside                                                                            list-style-position:inside

五、设置装饰列表符号颜色
    1、<ul>设置符号颜色：

ul li{
   width: 200px;
   list-style-type: none;
   list-style-position:outside ;
}
ul li:before{
   content:counter(item,disc) ' ';
   color: red;
}

2、<ol>设置符号颜色：
ol li{
    width: 200px;
    list-style-type: none;
    list-style-position:outside ;
    counter-increment:item ;
}
ol li:before{
    content:counter(item) '. ';
    color: red;
}

！效果为list-style-position:inside，就算设置list-style-position:outside也无法改变

六、设置装饰列表符号图形

list-style-image:url(xxx.xxx);

七、装饰列表简写

list-style:list-style-type list-style-image list-style-position;

例如：

list-style:circle url(img/bullet.gif) inside;