【Ripro美化】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>

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