CSS入门七：列表样式（主要是列表前面序号的样式，圆圈、方框，罗马序号，图片等等）

目录

1.列表样式的属性：

● 1.list-style-type：序号变成，空心圆、方框、数字，拉丁字母等等

● 2.list-style-position：列表位置的“看起来像缩进的”变化

● 3.list-style-image：列表前面的序号弄成图片

● 4.list-style：综合的写法：中间用空格隔开

---

由先前知道，列表包括无序列表：

       

有序列表：

    

列表属性设置，经常用于菜单、规律性展示等场景；这篇博客只涉及列表前面序号样式的简单设置，后续在CSS浮动部分会更深入的了解。

---

1.列表样式的属性：

● 1.list-style-type：序号变成，空心圆、方框、数字，拉丁字母等等

列表前面的序号的样式；自然下面前几个是无序列表的，后面几个是有序列表的；（实测，可以混用，但应该不提倡这样做吧，可能会引发其他奇怪的问题）

   

● 2.list-style-position：列表位置的“看起来像缩进的”变化

      inside：

   

      outside：默认设置，一般也使用默认的；

       

● 3.list-style-image：列表前面的序号弄成图片

一旦设置了list-style-image弄成了图片，list-style-type的设置就失效了；

效果：

● 4.list-style：综合的写法：中间用空格隔开

可以发现，上面三个属性的属性值不存在同名的混淆的情况，所以，list-style只要顺序对，可以缺失某个属性的值；如下面的例子，就没有写list-style-type的属性值，这样不会出问题。