Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素

尽力漂亮

于 2020-05-06 11:16:58 发布

阅读量860

点赞数

分类专栏：前端文章标签： java

本文链接：https://blog.csdn.net/weixin_44106334/article/details/105946785

版权

Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素

- 效果
- demo

选项卡、面板、时间线很重要

效果

在这里插入图片描述

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 之前引入 -->
		<style>
			h3 {
				margin-top: 16px;
				text-align: center;
			}
		</style>
	</head>
	<body style="padding: 20px;">
		<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" style="height: 100px;">
				<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>
				从而映衬出边框投影
			</di

最低0.47元/天解锁文章

尽力漂亮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素

Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素效果demo选项卡、面板、时间线很重要效果demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素&l...
复制链接

扫一扫