abstrait：.header{width: 100%;height: 50px;line-height: 50px;color: #fff;background: #2E6DA4;} .title{font-size: 20px;margin-left: 20px;} .userinfo{float: right;margi

.header{width: 100%;height: 50px;line-height: 50px;color: #fff;background: #2E6DA4;}
		.title{font-size: 20px;margin-left: 20px;}
		.userinfo{float: right;margin-right: 10px;}
		.userinfo a{color: #fff;}
		.menu{width: 200px;background: #333744;position: absolute;}
		.layui-collapse{border:none;}
		.layui-colla-item{border-top: none;}
		.layui-colla-title{background: #42485B;color: #fff;}
		.layui-colla-content{border-top: none;padding: 0;}
		.layui-colla-content a{color: #C4C5C9 !important;}

		.main{position: absolute;left: 200px;right: 0;}

<div class="header">
		<span class="title">JD商城--后臺(tái)管理</span>
		<span class="userinfo">
			admin【系統(tǒng)管理員】<a href="">退出</a>
		</span>
	</div>

	<div class="menu">
		<div class="layui-collapse">
		    <div class="layui-colla-item">
		    	<h2 class="layui-colla-title">管理員管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  		<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">管理員列表</a>
				  		</li>
					</ul>
		    	</div>
		  	</div>
		    <div class="layui-colla-item">
		   		<h2 class="layui-colla-title">權(quán)限管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  		<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">菜單管理</a>
				    		
				  		</li>
						<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">角色管理</a>
				    		
				  		</li>
				  		
					</ul>
		    	</div>
		  	</div>
		    <div class="layui-colla-item">
		   		<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  		<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">網(wǎng)站設(shè)置</a>
				  		</li>
					</ul>
		    	</div>
		  	</div>
		 	<div class="layui-colla-item">
		   		<h2 class="layui-colla-title">商品分類</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  		<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">分類列表</a>
				  		</li>
					</ul>
		    	</div>
		  	</div>
		  	<div class="layui-colla-item">
		   		<h2 class="layui-colla-title">產(chǎn)品管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  		<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">產(chǎn)品列表</a>
				  		</li>
					</ul>
		    	</div>
		  	</div>
		  	<div class="layui-colla-item">
		   		<h2 class="layui-colla-title">幻燈片管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  		<li class="layui-nav-item layui-nav-itemed">
				    		<a href="javascript:;">首頁(yè)首屏</a>
				  		</li>
					</ul>
		    	</div>
		  	</div>
		</div>
	</div>

	<div class="main">
		<iframe src="welcome.html" frameborder="0" scrolling="0" style="width: 100%;height: 100%;"></iframe>
	</div>
	<script>
		//注意：折疊面板 依賴 element 模塊，否則無(wú)法進(jìn)行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
	</script>

Professeur correcteur：韋小寶Temps de correction：2018-11-28 15:44:49
Résumé du professeur：嗯！寫(xiě)的很不錯(cuò)哦！課后記得多多練習(xí)！繼續(xù)加油吧！