html网站消息动态条数显示_小徽章圆点元素布局资源

html网页中常用到小徽章元素，包括个人中心消息条数显示布局，个人中心有动态圆点显示提示布局资源。

消息条数显示与圆点提示

一、消息条数与圆点提示效果

效果如下：

查看消息2 查看消息8 查看消息99 动态 动态

二、颜色说明

显示消息条数背景，这里对应设置class=layui-bg-gray，圆点设置背景class=layui-bg-orange

更多背景颜色对应CLASS：
默认class 里不设置颜色 为“赤”；
class 设置layui-bg-orange 背景为“橙色”
class 设置layui-bg-green 背景为“绿色”
class 设置layui-bg-cyan 背景为 “青色”
class 设置layui-bg-blue 背景为 “蓝色”
class 设置layui-bg-black 背景为 “黑色”
class 设置layui-bg-gray 背景为 “灰色”

根据需求，选择对应颜色class

三、应用说明

使用说明：此资源基于layui框架，所以需要下载此框架文件，引入项目后，html页面代码引入css文件和js文件，有自定义JS代码，再HTML放入提供JS自定义代码，最后只需要拷贝对应html代码即可实现需要效果。

项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。

四、在线演示与代码免费下载

1、在线单独演示地址

查看案例

2、打包免费下载地址

提示：无论对span还是bottom按钮标签都可以使用，需要对标签设置class="layui-btn"，再需要设置圆点使用span标签设置class=layui-badge即可，至于圆点颜色，再对齐span class加背景需要颜色CSS。