サマリー：.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商城--后臺管理</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">
				  		<!-- 側邊導航: <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">權限管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側邊導航: <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)設置</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側邊導航: <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">商品分類</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側邊導航: <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">產品管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側邊導航: <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">幻燈片管理</h2>
		    	<div class="layui-colla-content layui-show">
		    		<ul class="layui-nav layui-nav-tree" lay-filter="test">
				  		<!-- 側邊導航: <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>
	</div>

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

添削の先生：韋小寶添削時間：2018-11-28 15:44:49
先生のまとめ：嗯！寫的很不錯哦！課后記得多多練習！繼續(xù)加油吧！