SS列表属性作用如下：

• 设置不同的列表项标记为有序列表

• 设置不同的列表项标记为无序列表

• 设置列表项标记为图像

列表

在HTML中，有两种类型的列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

• 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是：:

实例

ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}ol.d{list-style-type:lower-alpha;}

一些值是无序列表，以及有些是有序列表。

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

实例

ul{list-style-image:url('sqpurple.gif');}

上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

浏览器兼容性解决方案

同样在所有的浏览器，下面的例子会显示的图像标记：

实例

ul{list-style-type:none;padding:0px;margin:0px;}ulli{background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px5px;padding-left:14px;}

例子解释：

• ul:

• 设置列表样式类型为没有删除列表项标记

• 设置填充和边距0px（浏览器兼容性）

• ul中所有li:

• 设置图像的URL，并设置它只显示一次（无重复）

• 您需要的定位图像位置（左0px和上下5px）

• 用padding-left属性把文本置于列表中

列表 -缩写属性

在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性，列表样式属性设置如下：

实例

ul{list-style:squareurl("sqpurple.gif");}

如果使用缩写属性值的顺序是：

• list-style-type

• list-style-position (有关说明，请参见下面的CSS属性表)

• list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

所有的CSS列表属性

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

【技术等级】初级

【承接文章】《CSS实现图片精灵，原来要这样使用背景属性，前端设计师必备知识》

本文小海老师为大家讲解利用CSS处理HTML中的列表，也就是CSS有关列表的属性。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

列表属性是指可以对HTML中的<ol></ol>标记对和<ul></ul>标记对进行样式设置的属性。这一组CSS属性包括以下三个：

• list-style-type

• list-style-image

• list-style-position

一、设置列表的项目符号或编号：

CSS技术使用 list-style-type 设置列表的项目符号或编号

在HTML中，主要操作的列表有两种：

• 无序列表：用<ul></ul>标记对实现。无序列表项中左侧的标识我们把它称为“项目符号”。

• 有序列表：用<ol></ol>标记对实现。有序列表项中左侧的标识我们把它称为“编号”。

有序列表与无序列表

CSS技术利用 list-style-type 属性来设置HTML列表左侧标识的样式。并且在CSS看来，<ul></ul>和<ol></ol>两个标记对不再进行有序和无序的区分，使用list-style-type属性设置为哪个取值，就是对应的哪种列表。

该属性包括以下几种取值：

• none，列表项无标记。

• disc，默认值，标记为实心圆。

• circle，标记为空心圆。

• square，标记为实心方块。

• decimal，标记为数字。

• decimal-leading-zero，标记为0开头的数字（01、02、03 等）。

• lower-roman，标记为小写罗马数字（i、ii、iii等）。

• upper-roman，标记为大写罗马数字（I、II、III等）。

• lower-alpha，标记为小写英文字母（a、b、c等）。

• upper-alpha，标记为大写英文字母（A、B、C等）。

二、使用自定义图片来代替项目符号和编号：

CSS技术利用 list-style-image 属性来设置列表左侧的标识为指定的图片

CSS技术利用 list-style-image 属性来设置列表左侧的标识为指定的图片。

格式：list-style-image:url(Image_URL);

例如：ul{list-style-image:url(../images/01.jpg);}

三、设置列表中列表项的缩进：

CSS技术利用 list-style-position 属性来设置列表项的缩进

CSS技术利用 list-style-position 属性来设置列表项的缩进。

该属性包括以下两种取值：

• loutside，默认值，列表项不缩进。

• linside，列表项缩进。

这个属性使用在列表项<li></li>标记对上的，不能用在<ol></ol>或<ul></ul>之上。

文章预告

下一篇文章中，小海老师会继续为大家向下讲解CSS属性，下一次我们讲解CSS中最为重要的一组属性：定位属性。这是CSS中非常常用的一组属性，希望大家千万不要错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。