分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » 如何修改ul以及li小圆点的颜色
+

如何修改ul以及li小圆点的颜色

  • 实现方法1
  • 实现方法2
  • 实现方法3
  • 实现方法4
  • 如何修改ul以及li小圆点的颜色-BanYuner

    CSS的学习真的是无穷无尽的,最近在爱博说博客看到了关于如何修改ul以及li小圆点的颜色的教程,我当时并没有看中修改原点的方法,但是我看中的是序号的方法,下面我就直接给大家引用了:

    实现方法1

    先重置掉ul li 默认的点,然后采用这样的写法

    <ul>
     <li><span class="dot"></span>内容内容内容</li>
    </ul>
    

    一下是class为dot的相关属性,直接放在style.css中即可。

    .dot{display: inline-block;width: 3px;height: 3px;margin-right: 5px;background: #666;vertical-align: middle;overflow: hidden;}
    

    实现方法2

    用图片来做

    li{list-style:none}把默认的给去掉,然后把着了色的圆点切成一张背景图片使用;
    
    li{background:url(图点图片路径) no-repeat;}
    

    实现方法3

    ul {
    list-style: none;
    counter-reset: count;
    }
     
    li:before {
    content: "● ";
    color: red;
    }
    

    相关效果如下:
    如何修改ul以及li小圆点的颜色-BanYuner

    实现方法4

    ul {
    list-style: none;
    counter-reset: count;
    }
     
    li:before {
    counter-increment: count;
    content: ""counter(count)"、";
    color: red;
    }
    

    相关效果如下:
    如何修改ul以及li小圆点的颜色-BanYuner

    简单的看完了之后,我相信会的人一定就知道怎么实用并且怎么部署了,这里我就不废话多说了。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    如何修改ul以及li小圆点的颜色

    支付宝(点击图片切换)

    扫码,支持我

    如何修改ul以及li小圆点的颜色

    微信(点击图片切换)

    扫码,手机看

    如何修改ul以及li小圆点的颜色
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress添加评论内容字数限制

      WordPress添加评论内容字数限制

      很久之前我们介绍过,如何添加文章内容字数限制,有兴趣的可以去了解一下: 那么今天给大家介绍的是,如何给WordPress评论内容中添加字数限...

      点击查看
    • Giphypress-WordPress文章内容中添加GIF图片

      Giphypress-WordPress文章内容中添加GIF图片

      看了标题之后,千万不要关闭这个页面,因为这个页面里面的内容可能跟你了解的不一样。 我们都知道 WordPress 可以通过添加媒体来上传 G...

      点击查看
    • 如何自定义WordPress登陆页面背景

      如何自定义WordPress登陆页面背景

      这个功能是一个小功能,但是就我了解到的,目前还是有很大一部分主题都是使用的了这个功能的,所以这里还是简单的介绍一下实现方法。 首先我们看到登...

      点击查看
    如何修改ul以及li小圆点的颜色
    4 + 7 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)