分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » 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中的评论总数

      如何显示WordPress中的评论总数

      这个方面应该是站点的小功能了,但是我相信很多人还是可以使用到的,所以这里还是简单的分享一下吧,希望对于那些小白或者又需要的用户有帮助。 站点...

      点击查看
    • WordPress如何调用APlayer音乐播放器

      WordPress如何调用APlayer音乐播放器

      HTML结构 相关设置 调用功能 昨天无意中看到了这个播放器,我个人觉得这个播放器非常符合自己的需求,那么我就毫不犹豫的使用起来了,功能实现...

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