吓我一跳

不知道你在查看自己和别人的日志时有没有发现：有的日志中列表项目<li>标签前是一个空心圆，有的是实心的小方块，有的是阿拉伯数字…今天就来看一下Wordpress上如何修改<li> 标签前的图标，其实不光是Wordpress，只要是使用css样式的程序都可以，如：Discuz、Z-blog、pjblog等等。

1. <li>标签简介：

   <li>标签可以用在有序列表<ol>标签和无序列表<ul>标签中使用，也就是说如果把<li> 放在<ol>中，可能就会出现1、2、3这样的顺序；如果放在<ul>中，则可能是一系列的小原点或小方块；

   其实不管是放在<ol>里还在<ul>里，使用的都只是一个css属性：“list-style-type”：

   list-style-type，可适用的属性在css2.1版中包括

   disc | circle | square | decimal | decimal-leading-zero |
   lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
   armenian | georgian | none | inherit

   值	描述
   disc	实心圆 默认
   circle	空心圆
   square	实心方块
   decimal	数字
   lower-roman	小写罗马数字(i, ii, iii, iv, v, 等)
   upper-roman	大写罗马数字(I, II, III, IV, V, 等)
   lower-greek	小写希腊字母(alpha, beta, gamma, 等)
   lower-latin	小写拉丁字母(a, b, c, d, e, 等)
   upper-latin	大写拉丁字母(A, B, C, D, E, 等)
   armenian	传统的亚美尼亚编号方式
   georgian	传统的乔治亚编号方式(an, ban, gan, 等)
   none	无

   注意：所有版本的IE浏览器（包括IE8）都不支持inherit、decimal-leading-zero等属性，故没有列出。

2. 使用方法：

   在Wordpress上的只需使用Dreamweaver等编辑器打开style.css，加上

   ol {
       list-style-type:decimal;
       margin-left:16px；
   }
   ul {
    list-style-type:square;
   }

   即可对有序列表<ol>和无效列表<ul> 中<li>的项目符号，上面定义的分别是数字和方块，请改成你喜欢的样式，并且可以使用margin和padding属性来控制距离。

3. 自定义<li>标签前的图标

   其实，自定义<li>标签前的图标只是使用“list-style-image”属性，不管在<ol>标签还是<ul>标签中都可以使用，如：

   ul {
     list-style-image:url(images/brss.gif)
   }
   ol {
    list-style-image:url(images/arss.gif)
   }