您的位置:首页 > css拷用 > 小徽章 > 正文

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)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui v2X(实时更新

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 不需要 此网页布局不用html引入JS库
layui教程 layui使用教程 layui教程地址

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

1、在线单独演示地址

查看案例

2、打包免费下载地址

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

相关标签: 圆点 徽章 动态 消息
文章来源网址:www.thinkcss.com/kaoyong/1464.shtml

日期:2017-11-16 18:54 ThinkCSS整理 css