RIPRO主题美化—菜单增加角标免费教程【亲测】

修改步骤:

首先复制以下css 内容到/ripro/assets/css/diy.css里


/*导航菜单图 开始*/
.cc {
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;
}

.zz {
    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;
}

/*菜单标签美化*/
.ff {
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;
}
/*菜单标签美化结束*/

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

 

下面只列举3个,在你的菜单名字后面添加上下面其中一个代码即可

<span class="cc">真香</span>          <span class="zz">更新中</span>          <span class="ff">免费</span>

如需添加多个只需在CSS里加下面一段代码即可,标签名自定义必须改否则冲突会导致不知名错误错位等! 

.gg { 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; }

 同上在你的菜单名字后面添加上下面其中一个代码即可 

<span class=”gg”>增加的</span>

 

免责声明:
1:如非特殊说明,本站对提供的素材及源码不拥有任何权利,其版权归原著者拥有。
2:本站内容均由互联网收集整理、网友上传,并且以技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
3:本站部分收费内容仅作本站日常维护费用,若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
4:请勿将源码、软件进行商业交易、转载等行为,源码、软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。
5:站内资源如有侵犯你版权的,请来信1058364519@qq.com指出,本站将立即改正。
6:素材源码均为网络收集,不承担任何版权问题,不提供任何技术支持!
7:严重警告本站木模型、木屋CAD图纸、木屋效果图未经允许不得转载:凡木屋模型及CAD文章由设计师QINYUHUI设计制作,享有内容所有权,文章仅在QINYUHUI名下网站、信息平台或嘿很有内涵微博发布,未经授权违者必究!!!

MASUC » RIPRO主题美化—菜单增加角标免费教程【亲测】