#精品
RIPRO美化之菜单增加角标WordPress美化教程

汇站 WordPress

2021-04-30 0 1,171

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

方法

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

.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>

赏

微信扫一扫

支付宝扫一扫

感谢您的来访，获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用，禁止用于任何商业环境！

1.  本网站名称：汇站网
2.  本站永久网址：https://www.huizhanii.com/
3.  本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务！
4.  未经原版权作者许可,禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担！
5.  为尊重作者版权，请在下载24小时内删除！请购买原版授权作品，支持你喜欢的作者，谢谢！
6.  若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们请来信     我们会及时删除，给您带来的不便，我们深表歉意！
7.  如下载链接失效、广告或者压缩包问题请联系站长处理！
8.  如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入！
9.  本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
10.  因源码具有可复制性，一经赞助，不得以任何形式退款。
11.  更多详情请点击查看

汇站网 WordPress RIPRO美化之菜单增加角标WordPress美化教程 https://www.huizhanii.com/223.html