目标
- 设置自带的符号样式
- 用图片设置符号样式
- 取消符号
列表在网页里使用的频率非常高,对于新闻类的网站来说,就是百分百的使用。列表的前头一般都是阿拉伯数字,作为列表的顺序。
当然,列表项的前缀是不止阿拉伯数字,还有小圆点'●'、正方形'■'等等,这些都是自带的样式。如果你还不满意,还可以自定义前缀。
![a472e565ed985fdbd33ae65aa65fa283.png](https://img-blog.csdnimg.cn/img_convert/a472e565ed985fdbd33ae65aa65fa283.png)
各种类型的列表符号
设置自带的符号样式
无论是有序列表,还是无序列表,都统一使用list-style-type属性来定义列表项符号。
语法:list-style-type:属性值;
有序列表自带的符号,都是跟顺序有关。
![3c8dc2a6992d770983d55777bc7a4b1c.png](https://i-blog.csdnimg.cn/blog_migrate/ca02cb9741ab5c77dc27a1501565fb51.jpeg)
属性值
更换了前缀的有序列表如下
![3d61cfd8d2142f47829f7a30b4261a5a.png](https://i-blog.csdnimg.cn/blog_migrate/0dd6935b09249b2dee121a6ebadf24f3.jpeg)
更换效果
无序列表自带的符号,都是小图标,跟顺序没关系
![192a5b29e11d78edec6d32f7a4d48cf2.png](https://i-blog.csdnimg.cn/blog_migrate/0ccf3a01472c3a93948ff254720eaeaf.jpeg)
属性值
更换了前缀的无序列表如下
![30fa3071aa47bba9b5030c28aa379a8a.png](https://i-blog.csdnimg.cn/blog_migrate/9ded91916b95d0c2746a979232ef9978.jpeg)
更换效果
列表项的图片符号
虽然列表项有自带样式,但很多时候都不是我们想要的效果,就可以使用自定义符号。通过list-style-image:url(图像地址)来设置。
语法:list-style-image:url(图像地址);
自定义列表项符号,实际上就是列表项符号改为一张图片
注意图片的尺寸要把握好,是无法修改大小
代码设置如下
![575dbb4dcd27e15d1671b718b3de8f18.png](https://i-blog.csdnimg.cn/blog_migrate/b2e1786274677e2b1b246e8865b92be3.jpeg)
设置图片
自定义前缀的列表效果如下
![3291e30821016c3b7a8fc2f16f749c4a.png](https://i-blog.csdnimg.cn/blog_migrate/8fa257347b3778fa3e823882f259e9f1.jpeg)
自定义列表符号
取消列表项的符号
list-style-type属性,实际上更多的使用在取消符号上,几乎能用到都是在这一点上
几乎所有的前端框架,在重置样式的时候,都是使用这个来取消列表项的默认符号
语法:list-style-type:none;
新闻类网站,都会有部分列表项是没有前缀符号
![c87c6d9864e538cf52d8be9baad40671.png](https://i-blog.csdnimg.cn/blog_migrate/6f0bce32b2ed0b186cafa16d68780ab0.jpeg)
空白列表符号
总结
![3ceffde17797f1dfb6531dfac1362979.png](https://i-blog.csdnimg.cn/blog_migrate/cfc6209c97013f6e014db4a4d0ee3f6f.jpeg)
总结