最新公告
  • 欢迎您光临即刻网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • RIPRO修改-菜单增加角标或者VIP、HOT、NEW文字

    RIPRO修改-菜单增加角标或者VIP、HOT、NEW文字

    正文概述 5201314   2020-09-9   32

    这个角标貌似很流行,连老油条在更新的它的站都用到了,小编今天就分享下RIPRO修改-菜单增加角标方法。效果如上图,当然颜色随你定,很简单!

    首先复制这段css/ripro/assets/css/diy.css里,

    或者

     外观-自定义-额外ccs 中加入一下代码

    /*菜单增加角标开始*/
    .vip {
    display: inline-block;
    transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
    background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
        color: #ffffff;
        border-radius: 1rem;
        padding: .15rem .275rem;
        line-height: 1;
        font-weight: bold;
    }
    
    .new {
        display: inline-block;
        transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
        background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
        color: #ffffff;
        border-radius: 1rem;
        padding: .15rem .275rem;
        line-height: 1;
        font-weight: bold;
    }
    /*菜单标签美化*/
    .label {
    display: inline-block;
    transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
    background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
        color: #ffffff;
        border-radius: 1rem;
        padding: .15rem .275rem;
        line-height: 1;
        font-weight: bold;
    }
    /*菜单增加角标结束*/

    然后到主题下面的菜单设置里,在你的菜单名字后面添加上你需要的代码,如

    <span class="vip">真香</span>
    <span class="new">HOT</span>
    

    RIPRO修改-菜单增加角标或者VIP、HOT、NEW文字插图

    ①本站源码仅用于学习和交流,勿用于展业。切勿私自传播于网络,将会追究法律责任。
    ②本站其他资源来源网络或者用户投稿,供学习交流之用。如有侵权请联系删除。
    ③资源如果失效或错链请联系站长。
    即刻码站__学习资源_站长交易_国内最专业的站长资源下载平台 » RIPRO修改-菜单增加角标或者VIP、HOT、NEW文字
    • 231会员总数(位)
    • 175资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 171稳定运行(天)

    即刻网_卤菜培训_线上卤菜培训_卤味研究所_国内最专业的卤菜培训资源下载平台

    开通vip 技术支持