小编知道童靴们大周一脑子都是蒙圈的，特意晚上再来发文章。晚上无聊也没有约会，最适合学点东西了。

开个玩笑活跃一下气氛，下面进入正题。童靴们还记得之前文章中讲到的无序列表和有序列表么，今天我们要讲的样式就是有关列表的。

list-style 简写属性在一个声明中设置所有的列表属性。

列表样式其实就是给列表前面的标记所定义的属性。我们来看下面的无序列表：

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>菠萝</li>

<li>草莓</li>

</ul>

我们在浏览器中所看的的列表，每一项列表前面都是有一个黑点作为标记的（有序列表的标记是数字）。

给ul设置list-style属性：

ul{ list-style: none;}

在浏览器中查看：

在实际的开发过程中，大部分都不需要默认的标记，所以上面的样式在你开发的过程中用到的最多。

list-style-type 设置列表项标记的类型

比如设置列表项的标记形状为实心方块：

ul{list-style-type: square;}

在浏览器中显示：

当然我们还可以设置很多类型：

none 无标记

disc 默认。实心圆

circle 空心圆

decimal 数字

......

在实际开发none用到的多，其他的都作为了解。

list-style-position 列表项标记的定位

list-style-position就是为定义标记所在的位置。

浏览器中显示：

list-style-image 使用图片作为列表项的标记

在浏览器中显示：

关于列表的样式就这么多了，一般我们都用第一个简写的形式,

ul{list-style: circle inside;}

把你需要设置的属性值写在一起，用空格隔开就行。

你必须非常努力，才能看起来毫不费力！

关注小白前端，持续收到文章推送~