徽章
徽章
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>徽章</title> <link rel="stylesheet" href="resources/layui/css/layui.css"> </head> <body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>小徽章、大家族</legend> </fieldset> <blockquote class="layui-elem-quote layui-quote-nm">小圓點：<span class="layui-badge-dot"></span><span class="layui-badge-dot layui-bg-orange"></span><span class="layui-badge-dot layui-bg-green"></span><span class="layui-badge-dot layui-bg-cyan"></span><span class="layui-badge-dot layui-bg-blue"></span><span class="layui-badge-dot layui-bg-black"></span><span class="layui-badge-dot layui-bg-gray"></span><br><br>常規弧形徽章：<span class="layui-badge">6</span><span class="layui-badge">99</span><span class="layui-badge">61728</span><span class="layui-badge">赤</span><span class="layui-badge layui-bg-orange">橙</span><span class="layui-badge layui-bg-green">綠</span><span class="layui-badge layui-bg-cyan">青</span><span class="layui-badge layui-bg-blue">藍</span><span class="layui-badge layui-bg-black">黑</span><span class="layui-badge layui-bg-gray">灰</span><br><br>邊框徽章：<span class="layui-badge-rim">6</span><span class="layui-badge-rim">Hot</span></blockquote> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>與其它元素的搭配</legend> </fieldset> <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button> <button class="layui-btn">動態<span class="layui-badge-dot layui-bg-orange"></span></button> <button class="layui-btn">動態<span class="layui-badge layui-bg-orange">10</span></button> <br><br><script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use([ 'element', 'jquery' ], function() {var $ = layui.jquery;var element = layui.element;}); </script> </body> </html>
總結
- 上一篇： 自定义Realm实现认证
- 下一篇： 时间线