徽章

徽章
开发工具与关键技术：VS MVC
作者：木林森
撰写时间：2019年 5月13日

一个好的页面，总离不开小小细节的点缀，比如徽章。徽章是一个修饰性的元素，它几乎能够和所以的元素搭配，比如按钮、导航、选项卡……
徽章本身细小不显眼，但是如果它们和其他的元素搭配就会有一种突出的效果，但是这种效果在页面中十分和谐，可以说在页面中它起到了锦上添花的作用。下面来认识一下这个小小的大家族吧。
徽章它不但有七种常用的颜色，它还可以有不同的风格类型（圆点、椭圆、边框），我们可以根据自己的需求去自行搭配。下面看下简单的例子：
比如一些软件中，收到新消息，它会在对应的地方显示一个红色的小圆点，它的代码如图1:
图1
这里的小圆点主要是通过layui-badge-dot来定义，需要注意的是它在里面不能够加文字，如果加上文字，它在浏览器中是不会显示文字的。如果你要非要在里面加字体，那就需要用到椭圆的风格，然后将它的边框设置成圆就行。椭圆里面可以设置文字，也可以设置数字，当然也可以设置一部分的特殊符号，请看下面图2代码：（颜色可以自由设置）
图2
说完圆点和椭圆，还有一种风格类型就是边框，边框的样式较少，简易的代码如图3：
图3
当然在以上的所有代码中，还需要一句最重要的代码，没有这句代码上面所有徽章的样式都显示不出来。这句代码的作用就是引用layui样式，它可以在网上下载。代码如图4：
图4

加上最重要的代码后就可以看到它们的效果了，效果图如图5所示：
图5
学习了徽章常用的样式，那么我们就可以拿来小试牛刀了！
在按钮上运用圆点和椭圆的例子，代码及效果图如下表：
代码a： 效果b

除了按钮，导航栏也经常会用到徽章中的圆点和椭圆，下面看一个简单的例子：
代码及效果图如下表：
代码c： 效果d：

在这里插入图片描述
看过了按钮和导航，还有一个在大一点的项目中必不可少的就是用到选项卡，就比如我们常常使用的QQ、微信、或者支付宝，它都会运用到我们的徽章大家族，下面这个例子就是模仿他们弄出来的，代码及效果如下表：
代码e： 效果f：

这个是以简约风格作为例子，其实它支持所有的风格，如果你有兴趣的话，可以自己用它跟更多的元素搭配，找到你最喜欢的样子，至于怎么做，可以，自由把控。
最后总结无非两点：边距和背景色，如果你能够很好运用这两点，那么你的徽章将会大显神威！