本篇文章属于扩展功能，高级教程。需要有点点的Html基础，如果一点都不会，那也没关系。本篇教程会很详细，有基础的朋友一看就懂，没基础的朋友就一步一步对照着来，也能做出好看的效果！
效果预览
![图片[1]-给导航菜单添加自定义徽章及多种CSS样式菜单设置方法[图文教程] - 龙图腾工作室-龙图腾工作室](https://datangcorp.com/wp-content/uploads/2022/05/1652253297-Pasted.png)
添加徽章
![图片[2]-给导航菜单添加自定义徽章及多种CSS样式菜单设置方法[图文教程] - 龙图腾工作室-龙图腾工作室](https://datangcorp.com/wp-content/uploads/2022/05/1652253340-Pasted.png)
首先我们将上面预览图的相对应的HTML代码附上！
<!– badge标签即为徽章 支持多项Class –>
主题购买<badge>折扣</badge>
网站建设<badge class=“jb-yellow”>NEW</badge>
最新优惠<badge class=“badge-bw jb-vip2”><i>VIP</i></badge>
特惠资源<badge class=“c-blue-2”>NEW</badge>
示例页面<badge class=“jb-red badge-bw”>99</badge>
发布文章<badge class=“b-blue”></badge>
友情链接<badge class=“jb-green”>+1</badge>
<!– 徽章内也支持图标代码 –>
根据代码就很容易理解了，badge 便签也就是徽章了。如何控制标签的样式、颜色，也就是class来处理了！
![图片[3]-给导航菜单添加自定义徽章及多种CSS样式菜单设置方法[图文教程] - 龙图腾工作室-龙图腾工作室](https://datangcorp.com/wp-content/uploads/2022/05/1652253383-Pasted.png)
主题官方支持的 class 列表
同时 badge 徽章的内容也是支持自定义图标的，例如 你可以试试这句代码：
<!– 图标徽章示例 –>
特惠资源<badge class=“c-blue-2”><i class=“fa fa-bolt”></i></badge>
按钮样式
按照上面的方法举一反三，菜单还可以显示为按钮风格样式，先看看效果图吧！
![图片[4]-给导航菜单添加自定义徽章及多种CSS样式菜单设置方法[图文教程] - 龙图腾工作室-龙图腾工作室](https://datangcorp.com/wp-content/uploads/2022/05/1652253470-Pasted.png)
对应的Html代码如下：
我相信，细心的朋友已经完全看明白了！简单讲解一下：
- 将菜单的文字用
span标签包围 class仍然可以使用上面表格中的颜色、背景色class- 最重要的就是class多了一个
but，没错，这个就是代表按钮的 class - class再增加一个
radius，即可显示为两边圆角
到这里，整个教程就结束了！赶紧试一试，让您的网站导航菜单也变得丰富多彩吧！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容