ul中怎么实现带效果的有序列表

biaogegegege1 2020-06-29 21:09:05

172

本文链接：https://blog.csdn.net/biaogegegege1/article/details/107028660

版权

众所周知，html中有两种列表，一种是有序列表<ol>，一种是无序列表<ul>，但如果要在有序列表的数字上加效果，我暂时是没找到方法，除非换成图片，但是我们可以在无序列表上，自己手动打上数字，然后用<span>标注，然后给他加上效果，但是如果要实现与上方的容器对齐时，记得在<li>加背景效果，而不是在<ul>里面加背景效果，不然前面的黑点也会被覆盖，手动打上的数字前面空白就太长了，如下所示：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200629210500910.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpYW9nZWdlZ2VnZTE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200629210546248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpYW9nZWdlZ2VnZTE=,size_16,color_FFFFFF,t_70)
理想情况如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200629210651167.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200629210738538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpYW9nZWdlZ2VnZTE=,size_16,color_FFFFFF,t_70)