199 lines
5.8 KiB
HTML
199 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>弹层封装</title>
|
||
<link href="../../assets/css/pearone.css" rel="stylesheet" />
|
||
<link href="../../component/layui/css/layui.css" rel="stylesheet"/>
|
||
<link href="../../component/font-awesome/css/font-awesome.css" rel="stylesheet"/>
|
||
<script src="../../component/layui/layui.js"></script>
|
||
|
||
<style>
|
||
body{
|
||
margin: 10px;
|
||
}
|
||
|
||
.layui-tab-circular {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
}
|
||
|
||
.layui-tab-circular .layui-tab-title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
border: 0px;
|
||
background-color: whitesmoke!important;
|
||
}
|
||
|
||
.layui-tab-circular .layui-tab-title li {
|
||
height: 32px;
|
||
line-height: 32px;
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
margin-left: 8px;
|
||
border: none;
|
||
}
|
||
|
||
.layui-tab-circular .layui-tab-title li span {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.layui-tab-circular .layui-tab-title li:hover {
|
||
color: dodgerblue;
|
||
|
||
}
|
||
|
||
/** 选中状态 */
|
||
.layui-tab-circular .layui-this {
|
||
color: dodgerblue!important;
|
||
border: none !important;
|
||
box-shadow: 0px 0px 5px gray;
|
||
}
|
||
|
||
/** 选中后 */
|
||
.layui-tab-circular .layui-this:after {
|
||
border: none;
|
||
}
|
||
|
||
.layui-tab-title li .layui-tab-close {
|
||
|
||
border-radius: 50px;
|
||
}
|
||
|
||
.layui-tab-title li .layui-tab-close:hover {
|
||
|
||
border-radius: 50px;
|
||
background-color: lightgray;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body class="layui-bg-gray">
|
||
|
||
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
默认风格选项卡
|
||
</div>
|
||
<div class="layui-card-body">
|
||
|
||
<div class="layui-tab">
|
||
<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. 高度默认自适应，也可以随意固宽。
|
||
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
顶部选中样式
|
||
</div>
|
||
<div class="layui-card-body">
|
||
|
||
<div class="layui-tab layui-tab-topline">
|
||
<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. 高度默认自适应，也可以随意固宽。
|
||
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
顶部选中样式
|
||
</div>
|
||
<div class="layui-card-body">
|
||
|
||
<div class="layui-tab layui-tab-button">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this"><span class="layui-icon layui-icon-circle-dot"></span>网站设置</li>
|
||
<li><span class="layui-icon layui-icon-circle-dot"></span>用户管理</li>
|
||
<li><span class="layui-icon layui-icon-circle-dot"></span>权限分配</li>
|
||
<li><span class="layui-icon layui-icon-circle-dot"></span>商品管理</li>
|
||
<li><span class="layui-icon layui-icon-circle-dot"></span>订单管理</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
1. 高度默认自适应，也可以随意固宽。
|
||
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
圆形选项卡
|
||
</div>
|
||
<div class="layui-card-body">
|
||
|
||
<div class="layui-tab layui-tab-circular">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this"><span class=""></span>网站设置</li>
|
||
<li><span class=""></span>用户管理</li>
|
||
<li><span class=""></span>权限分配</li>
|
||
<li><span class=""></span>商品管理</li>
|
||
<li><span class=""></span>订单管理</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
1. 高度默认自适应，也可以随意固宽。
|
||
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
layui.use('element', function(){
|
||
var $ = layui.jquery
|
||
,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|