整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
列表是一个接一个显示条目的首选方式，而不是使用<br>标记。完整的列表定义包括开始和结束标记，以及表示列表中每个条目的标记。
有三种类型的列表：有序列表、无序列表和定义列表。
无序列表是一个带条目符号的列表，类似于菜单。
无序列表 - <ul> ... </ul>
ul标记定义无序列表的开始和结束，列表项包含在ul标记中。
无序列表项 - <li> ... </li>
li标记添加每个条目的文本，每个列表项必须有自己的li标记。
符号类型 <ul type="disc | circle | square">
默认情况下，浏览器将显示圆形条目符号。这可以通过使用ul标记的type属性来更改，这将更改整个列表的条目符号类型。
条目符号类型 <li type="?">
通过设置li标记的type属性，可以为列表中的某个条目设置不同的符号类型。
以下是无序列表的示例：
浏览器显示内容如下所示：
望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《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教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
一、在Html中 列表一共分为三种：
（1）无序列表 ：使用 ul 标签来创建，用 li 标签来表示列表项 (较常用)
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>（2）有序列表 ：使用 ol 标签来创建，用 li 标签来表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>（3）定义列表 ：使用 dl 标签来创建，用 dt 标签来表示定义的内容 ，dd 标签来对内容进行解释说明
<dl>
<dt>YYDS</dt>
<dd>yyds是“永远的神”的缩写 [1] ，常被粉丝用来赞赏自己的爱豆 </dd>
<dt>XSWL</dt>
<dd>XSWL = 笑死我了”，作为当代沙雕青年，每天除了哈哈哈就是“窝窝头一块钱四个</dd>
</dl>二、列表相互之间可以嵌套：
<ul>
<li>节日
<ol>
<li>中秋</li>
<li>国庆</li>
<li>元旦</li>
</ol>
</li>
<li>中国</li>
<li>世界</li>
</ul>
三、网页展示：
网页效果展示
*请认真填写需求信息，我们会在24小时内与您取得联系。
