天缘博客

本文演示全部CSS list-style列表样式属性，因样式类型太多，干脆全部测试抓个图下来，大家用的时候直接对照着找一种风格就可以了，list-style有三种属性，包括list-style-type、list-style-position和list-style-image，分别对应设置列表样式类型、位置和图片，默认是图片属性为none，所以最常用的还是前两种属性。

一、list-style样式属性

list-style有三个属性，分别按以下顺序设置：

• list-style-type表示列表样式类型，总共有22种，演示参下文，缺省值 disc
• list-style-position表示列表样式位置，缺省值outside，outside是以列表项内容为准对齐（参下面演示），inside是以列表项标记为准对齐。
• list-style-image表示列表样式图片，对既有列表类型不满意时，可以使用图片来替代，缺省值none

样式风格可一次指定，也可以分立单独指定：

如一次指定：list-style:circle outside url(/images/arrow.gif);

也可单独指定：list-style-type:circle;list-style-position:outside;list-style-image:url(/images/arrow.gif);

示例：

<style type="text/css">
.sa {width:200px; border:1px solid #CCC;font-size:15px; background:#FFF7DE;}
.sa li {list-style:circle inside;margin:3px 0px 0px 0px;}
</style>
<ul class="sa">
    <li>欢迎光临 天缘博客</li>
    <li>欢迎光临 天缘博客</li>
    <li>欢迎光临 天缘博客</li>
</ul>

二、list-style-position样式位置属性演示

1、list-style:inside;样式

2、list-style:outside;样式（默认）

三、list-style-type样式类型演示

默认list-style-position为outside下测试抓图（Firefox下）。

1、list-style:armenian;样式

2、list-style:circle;样式

3、list-style:cjk-ideographic;样式

4、list-style:decimal;样式

5、list-style:decimal-leading-zero;样式

6、list-style:disc;样式(默认)

7、list-style:georgian;样式

8、list-style:hebrew;样式

9、list-style:hiragana;样式

10、list-style:hiragana-iroha;样式

11、list-style:katakana;样式

12、list-style:katakana-iroha;样式

13、list-style:lower-alpha;样式

14、list-style:lower-greek;样式

15、list-style:lower-latin;样式

16、list-style:lower-roman;样式

17、list-style:none;样式

18、list-style:square;样式

19、list-style:upper-alpha;样式

20、list-style:upper-latin;样式

21、list-style:upper-roman;样式

22、list-style:inherit;样式

三、list-style-image图片样式演示

list-style-image就是前面的列表项标记以图片形式代替，演示略。

更多阅读：http://www.w3school.com.cn/css/pr_list-style.asp