修改本站的导航栏:角标徽章、图标

一、右上角的徽章

效果预览

添加徽章

图片[3]-修改本站的导航栏:角标徽章、图标-微看VCAN

<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

对应的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


👋 感谢您的观看!
请关注【资源下载】获得资源分享链接!

© 版权声明
THE END
整理不易,点赞支持一下
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容