<!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>

