分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » WordPress » 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小圆点的颜色
    匿名

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

    如何修改ul以及li小圆点的颜色
    2 + 9 =