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

【技术等级】初级

【承接文章】《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教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

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

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

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

TML 支持有序、无序和定义列表:

HTML 列表

本例演示无序列表。无序列表

有序列表

本例演示有序列表。

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

浏览器显示如下：

• Coffee

• Milk

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项项使用数字来标记。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

浏览器中显示如下：

1. Coffee

2. Milk

   
   
   

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

浏览器显示如下：

• Coffee

• - black hot drink

• Milk

• - white cold drink

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

更多实例

不同类型的有序列表

本例演示不同类型的有序列表。

不同类型的无序列表

本例演示不同类型的无序列表。

嵌套列表

本例演示如何嵌套列表。

嵌套列表 2

本例演示更复杂的嵌套列表。

自定义列表

本例演示一个定义列表。

HTML 列表标签

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

介：列表大家都应该都多少有点了解，列表是什么呢？你像课本目录，大家都看过那就是最熟悉的列表了，各位原谅我智商有限，我只能举这么一个不是例子的例子！好，话不多说，切入正题了！

工具软件：大家平常有什么好的工具软件可在下面评论下！新手的话我推荐1.dreamever 2.notepad++ 3.HBuilder 这3个里的任意一个！

需求：任务1.在网页上显示：

任务一效果图

任务2.在网页上显示：

任务二效果图

代码截图：

代码截图

知识点分析：在html中，网页列表分为：1.有序列表2.无序列表！

有序列表用<ol>标签一般格式为<ol> <li>列表</li> </ol>,在<ol>标签中有一个重要属性为type，可改变列表样式大家可以自己试验一下！

无序列表用<ul>标签一般格式为<ul> <li>列表</li> </ul>,在<ul>标签中也有一个重要属性type，同样也是改变列表样式，他跟<ol>标签的区别是一个按顺序排列，一个无顺序排列！

好的，今天的课程就讲到这里，大家想学什么在评论下方评论，有什么不会的不懂得也可评论，我会一一给大家回复，欢迎大家订阅收藏点赞，想要了解更多的可以关注微信公众号“武讯科技”！