摘要：主要是通过layui来对后台管理页面的侧边进行页面布局。首先引入layui的css和js文件。左侧边菜单采用layui的折叠面板和竖直导航效果进行样式设置，右边内容采用内联样式进行设置。并采用绝对定位进行位置定位。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"&
主要是通过layui来对后台管理页面的侧边进行页面布局。
首先引入layui的css和js文件。
左侧边菜单采用layui的折叠面板和竖直导航效果进行样式设置，右边内容采用内联样式进行设置。并采用绝对定位进行位置定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JD商城--后台管理系统</title>
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css">
<script style="text/javascript" href="layui-v2.4.5/layui/layui.js"></script>
<style style="text/css">
.header{width: 100%;height:50px;line-height: 50px;background:pink;color: #fff;}/*设置标题样式*/
.title-l{margin-left: 20px;font-size:20px;}
.title-r{margin-right: 16px;font-size:12px;float: right;}
.title-r a{color: #fff;}
.menu{width: 200px;background: #333744;position: absolute;}/*设置左边边板*/
.layui-collapse{border:none;}
.layui-colla-item{border-top:none;}
.layui-colla-title{color: #fff;background:#42485b;}
.layui-colla-content{border-top:none;padding: 0px;}
.main{position: absolute;left: 200px;right: 0px;}/*使用绝对定位设置内联样式的位置*/
</style>
</head>
<body>
<!-- header -->
<div>
<span>
京东商城--后台管理系统
</span>
<span>
admin [管理员] <span><a href="#">退出</a></span>
</span>
</div>
<div></div>
<!-- 菜单 -->
<div>
<div>
<!-- 采用layui中"折叠面板"效果来设置左面板 -->
<div>
<h2>管理员管理</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>
</div>
</div>
<div>
<h2>权限设置</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></div>
</div>
<div>
<h2>系统设置</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></div>
</div>
</div>
</div>
<!-- 操作页面 -->
<div>
<!-- 采用内联框架设置 -->
<iframe src="welcom.html" frameborder="0" scrolling="0" style="width:100%;height:100%" ></iframe>
<!-- 设置内联样式的边框为0.不显示滚动条，宽高为全显示。 -->
</div>
</body>
</html>内联样式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="text-align:center;color:gray;font-size:20px;"> <h1>欢迎使用京东后台管理系统</h1> </div> </body> </html>
批改老师：灭绝师太批改时间：2018-12-10 14:28:06
老师总结：完成的不错，layui搭建页面迅速，要学会看文档哟！
