layui--页面元素之选项卡，进度条，表格

最新推荐文章于 2023-07-14 22:38:39 发布

Asteroid 325

最新推荐文章于 2023-07-14 22:38:39 发布

阅读量564

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107384260

版权

layui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="layui/css/layui.css" />
	<script src="layui/layui.js"></script>
	<body>
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		  <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>
		</div>      
		      
	</body>
	<script>
		//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
	</script>
</html>

在这里插入图片描述

进度条

https://www.layui.com/doc/element/progress.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="layui/css/layui.css" />
	<script src="layui/layui.js"></script>
	<body>
	
		  <div class="layui-progress layui-progress-big">
		    <div class="layui-progress-bar" lay-percent="20%"></div>
		  </div>    
	</body>
	<script>
		//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
	</script>
</html>

在这里插入图片描述

面板

https://www.layui.com/doc/element/panel.html
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="layui/css/layui.css" />
	<script src="layui/layui.js"></script>
	<body>
		<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 ">内容区域</div>
		  </div>
		  <div class="layui-colla-item">
		    <h2 class="layui-colla-title">鲁迅</h2>
		    <div class="layui-colla-content layui-show">内容区域</div>
		  </div>
		</div>
		 
	</body>
	<script>
		//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
	</script>
</html>

在这里插入图片描述

表格

https://www.layui.com/doc/element/table.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="layui/layui.js"></script>
	</head>
	<body>
		<table class="layui-table" style="width: 800px;margin:10px auto">
		  <colgroup>
		    <col width="150">
		    <col width="200">
		    <col>
		  </colgroup>
		  <thead>
		    <tr>
		      <th>昵称</th>
		      <th>加入时间</th>
		      <th>签名</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>
		      <td>贤心</td>
		      <td>2016-11-29</td>
		      <td>人生就像是一场修行</td>
		    </tr>
		    <tr>
		      <td>许闲心</td>
		      <td>2016-11-28</td>
		      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
		    </tr>
		  </tbody>
		</table>
		      
	</body>
</html>

在这里插入图片描述

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui--页面元素之选项卡，进度条，表格

选项卡<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"></script> <body>
复制链接

扫一扫

专栏目录