一、右上角的徽章
效果预览
![图片[1]-修改本站的导航栏:角标徽章、图标-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2022/12/20221203050231775.png)
![图片[2]-修改本站的导航栏:角标徽章、图标-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2022/12/20221203050229536.png)
添加徽章
![图片[3]-修改本站的导航栏:角标徽章、图标-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2022/12/20221203050516832.png)
<badge>折扣</badge>
可以直接是:汉字、英文、数字、空白(显示圆点)、+数字
class:
class | 样式 | class | 样式 | class | 样式 |
---|---|---|---|---|---|
c-red | 红色文字 | b-theme | 主题背景色 | jb-red | 渐变红色背景 |
c-yellow | 橙色文字 | b-red | 红色背景 | jb-yellow | 渐变橙色背景 |
c-blue | 蓝色文字 | b-yellow | 橙色背景 | jb-blue | 渐变蓝色背景 |
c-blue-2 | 深蓝色文字 | b-blue | 蓝色背景 | jb-green | 渐变绿色背景 |
c-green | 绿色文字 | b-green | 深蓝色背景 | jb-purple | 渐变紫色背景 |
c-purple | 紫色文字 | b-purple | 紫色背景 | jb-vip1 | 渐变金色背景 |
jb-vip2 | 渐变黑色背景 |
支持badge内插入style样式。
2、按钮样式
<span class=”but jb-red”>主题购买</span>
关键就是but代表是按钮,radius是圆角。
![图片[4]-修改本站的导航栏:角标徽章、图标-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2022/12/20221203050920699.jpg)
对应的Html代码如下:
<!-- 按钮风格的菜单 -->
<span class="but jb-red">主题购买</span>
<span class="but c-blue">网站建设</span>
<span class="but c-yellow">科技资讯</span>
<span class="but b-purple radius">最新优惠</span><badge><i>VIP</i></badge>
<span class="but jb-vip2 radius">特惠资源</span><badge class="jb-red"><i class="fa fa-bolt"></i></badge>
3、图标选择
网址:http://www.fontawesome.com.cn/faicons/
zibll教程导航
徽章:https://www.zibll.com/1012.html
图标:https://www.zibll.com/529.html
👋 感谢您的观看!
资源解压密码:ipotato.chat
© 版权声明
本站网络名称: 微看VCAN网
本站永久网址: https://www.dzq3.com
网站侵权说明: 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
4 本站资源统一解压密码:ipotato.chat
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
4 本站资源统一解压密码:ipotato.chat
THE END
暂无评论内容