一、右上角的徽章

效果预览

添加徽章

<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是圆角。

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