分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » 如何修改ul以及li小圆点的颜色
  • +
  • 2
  • 如何修改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 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

      点击查看
    如何修改ul以及li小圆点的颜色
    8 + 8 =