. 前言
本篇来介绍下列表的CSS样式编写，在学习之前，我们先回顾下HTML中的有序列表和无序列表。
<span>无序列表-我的爱好：</span> <ul> <li>篮球</li> <li>足球</li> <li>乒乓球</li> </ul> <span>有序列表-成绩排行：</span> <ol> <li>张三</li> <li>李四</li> <li>赵五</li> </ol>
效果如下，无序列表没有顺序之分，有序列表是有先后顺序的。
2. 无序列表样式
可以通过list-style-type修改无序列表的样式，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ul-none { list-style-type: none; } .ul-circle { list-style-type: circle; } .ul-square { list-style-type: square; } </style> </head> <body> <ul> <li>篮球</li> <li>足球</li> <li>乒乓球</li> </ul> <ul class="ul-none"> <li>篮球</li> <li>足球</li> <li>乒乓球</li> </ul> <ul class="ul-circle"> <li>篮球</li> <li>足球</li> <li>乒乓球</li> </ul> <ul class="ul-square"> <li>篮球</li> <li>足球</li> <li>乒乓球</li> </ul> </body> </html>
上述四个无序列表，分别通过class选择器，设置了默认、无、圆圈、方块四种列表样式，所以效果如下：
3. 有序列表样式
有列表可以通过list-style-type，将序号部分修改为英文字母，罗马字母等格式。HTML部分代码：
<ol> <li>张三</li> <li>李四</li> <li>赵五</li> </ol> <ol class="ol-lower-alpha"> <li>张三</li> <li>李四</li> <li>赵五</li> </ol> <ol class="ol-lower-roman"> <li>张三</li> <li>李四</li> <li>赵五</li> </ol>
CSS部分：
.ol-lower-alpha { list-style-type: lower-alpha; } .ol-lower-roman { list-style-type: lower-roman; }
上面的HTML元素，分别是默认效果、小写英文字母、小写罗马字母样式，所以效果如下：
可见效果一般情况，所以平时列表样式用的也不多。
4. 修改列表标记图像
还可以通过list-style-image，将列表左侧的标记修改为一个图像：
<ol class="list-image-mark"> <li>张三</li> <li>李四</li> <li>赵五</li> </ol>
CSS代码：
.list-image-mark { list-style-image: url('?article/806217/logo.jpg'); }
可见为列表使用图像标记，效果还是比较好看的。
5. 小结
列表样式在实际开发过程中，使用的并不算多，但是也是需要大家了解的，一旦遇到相关代码能读懂即可。
