Layui页⾯元素之选项卡、进度条、⾯板、表格、徽章、时间线、辅助元
素
La yui页⾯元素之选项卡、进度条、⾯板、表格 、徽章、时间线、辅助元素
选项卡、⾯板、时间线很重要
效果
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui页⾯元素之选项卡、进度条、⾯板、表格、徽章、时间线、辅助元素</title>
<!-- 新 layui 核⼼ CSS ⽂件 -->
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
<script src="layuiadmin/layui/layui.js"></script>
<!-- jQuery⽂件。务必在layui.min.js 之前引⼊ -->
javascript进度条<style>
h3 {
margin-top: 16px;
text-align: center;
}
</style>
</head>
<body >
<h3 class="layui-bg-blue">选项卡</h3>
<h6 class="layui-bg-orange">默认Tab选项卡</h6>
<h6 class="layui-bg-orange">Tab简洁风格</h6>
<h6 class="layui-bg-orange">Tab卡⽚风格</h6>
<!--通过追加class：layui-tab-card来设定卡⽚风格-->
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">⽹站设置</li>
<li>⽤户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" >
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
<h6 class="layui-bg-orange">tab响应式</h6>
<h6 class="layui-bg-orange">带删除的tab</h6>
<h6 class="layui-bg-orange">id焦点定位</h6>
<h3 class="layui-bg-blue">⾯板</h3>
<h6 class="layui-bg-orange">卡⽚⾯板</h6>
<div class="layui-card">
<div class="layui-card-header">卡⽚⾯板</div>
<div class="layui-card-body">
卡⽚式⾯板⾯板通常⽤于⾮⽩⾊背景⾊的主体内<br>
从⽽映衬出边框投影
</div>
</div>
<h6 class="layui-bg-orange">折叠⾯板</h6>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<h6 class="layui-bg-orange">开启⼿风琴</h6>
<div class="layui-collapse" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content">内容区域</div>
</div>
</div>
<h3 class="layui-bg-blue">表格-基本风格（⿏标聚焦会点亮）</h3>  <table class="layui-table">
<colgroup>
<col width="150">
<col width="120">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加⼊时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>wxm贤⼼</td>
<td>2020-4-29</td>
<td>⼈⽣就像是⼀场修⾏</td>
</tr>
<tr>
<td>wxm贤⼼111111</td>
<td>2020-4-29</td>
<td>⼈⽣就像是⼀场修⾏</td>
</tr>
<tr>
<td>wxm贤⼼222222</td>
<td>2020-4-29</td>
<td>⼈⽣就像是⼀场修⾏</td>
</tr>
<tr>
<td>wxm贤⼼333333</td>
<td>2020-4-29</td>
<td>⼈⽣就像是⼀场修⾏</td>
</tr>
</tbody>
</table>
<h3 class="layui-bg-blue">徽章</h3>
<h6 class="layui-bg-orange">快速使⽤</h6>
<!--⼩圆点，通过 layui-badge-dot 来定义，⾥⾯不能加⽂字-->
<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>
<!--椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使⽤⽅式-->
<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>
<!--边框体，通过 layui-badge-rim 来定义-->
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
<h6 class="layui-bg-orange">与其它元素的搭配</h6>
按钮
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>导航
<ul class="layui-nav" >
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个⼈中⼼<span class="layui-badge-dot">9</span></a>
</li>
</ul>
选项卡
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">⽹站设置</li>
<li>⽤户管理<span class="layui-badge-dot"></span></li>
<li>最新邮件<span class="layui-badge">99+</span></li>
</ul>
<div class="layui-tab-content"></div>
</div>
<h3 class="layui-bg-blue">时间线</h3>
<ul class="layui-timeline">