<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<link rel="stylesheet" href="../../assets/css/pearone.css" />
		<link rel="stylesheet" href="../../component/layui/css/layui.css" />
		<style>
		   .pearone-container{
				margin: 10px;
				background: lightgray;
			} 
		</style>
	</head>
	<body class="pearone-container">
		
		<div  class="layui-card">
			<div class="layui-card-header">经典样式</div>
			<div class="layui-card-body">
				<ul class="layui-nav" lay-filter="">
					<li class="layui-nav-item"><a href="">最新活动</a></li>
					<li class="layui-nav-item layui-this"><a href="">产品</a></li>
					<li class="layui-nav-item"><a href="">大数据</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<!-- 二级菜单 -->
							<dd><a href="">移动模块</a></dd>
							<dd><a href="">后台模版</a></dd>
							<dd><a href="">电商平台</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">社区</a></li>
				</ul>
				
			</div>
		</div>
		
		<div  class="layui-card">
			<div class="layui-card-header">亮主题导航栏</div>
			<div class="layui-card-body">
				<ul class="layui-nav  layui-nav-topinline layui-bg-white" lay-filter="">
					<li class="layui-nav-item"><a href="">最新活动</a></li>
					<li class="layui-nav-item layui-this"><a href="">产品</a></li>
					<li class="layui-nav-item"><a href="">大数据</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<!-- 二级菜单 -->
							<dd><a href="">移动模块</a></dd>
							<dd><a href="">后台模版</a></dd>
							<dd><a href="">电商平台</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">社区</a></li>
				</ul>
				
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-header">
				暗主题导航栏
			</div>
			<div class="layui-card-body">
				<ul class="layui-nav  layui-nav-topinline" lay-filter="">
					<li class="layui-nav-item"><a href="">最新活动</a></li>
					<li class="layui-nav-item layui-this"><a href="">产品</a></li>
					<li class="layui-nav-item"><a href="">大数据</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<!-- 二级菜单 -->
							<dd><a href="">移动模块</a></dd>
							<dd><a href="">后台模版</a></dd>
							<dd><a href="">电商平台</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">社区</a></li>
				</ul>
			</div>
		</div>
		
		
		

		<script src="../../component/layui/layui.js"></script>
		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;
		
			});
		</script>
	</body>
</html>
