摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台</title>
<!-- 引入layui文件 -->
<link rel="stylesheet" href="./layui-v2.4.5/layui/css/layui.css">
<style>
/* 顶部开始 */
.alignRight{
text-align: right;
}
.header{
height:70px;
background: #2268AB;
line-height: 70px;
padding:0 20px;
}
.logo{
font-size: 24px;
color:#ddd;
}
.userName{
color:#ddd;
}
/* 顶部结束 */
/* aside开始 */
html,body,.layui-row,.layui-col-md3{
height:100%;
}
.layui-col-md3{
background: #333846;
}
.layui-collapse{
background: #007B8D;
color:#ddd;
border:0;
}
.layui-colla-content{
color:#ddd;
border:0;
}
.layui-colla-title{
background: #44475E;
color:#ddd;
}
.layui-colla-item{
border:0;
}
/* aside结束 */
/* main开始 */
.main{
padding:5px 15px;
}
.hidden{
display: none;
}
/* main结束 */
</style>
</head>
<body>
<div class="layui-row layui-col-space5">
<div class="layui-row grid-demo grid-demo-bg1">
<div class="layui-col-md12 header">
<div class="layui-col-md6 logo">
JD商城--后台管理系统
</div>
<div class="layui-col-md6 alignRight userName">
<span>admin【系统管理员】</span>
<span>退出</span>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-collapse" lay-accordion onclick="select(event)">
<div class="layui-colla-item">
<h2 class="layui-colla-title a1">超级管理员</h2>
<div class="layui-colla-content layui-show">管理员列表</div>
</div>
<div class="layui-colla-item a2">
<h2 class="layui-colla-title">权限管理</h2>
<div class="layui-colla-content">权限管理列表</div>
</div>
<div class="layui-colla-item a3">
<h2 class="layui-colla-title">系统设置</h2>
<div class="layui-colla-content">系统设置列表</div>
</div>
<div class="layui-colla-item a4">
<h2 class="layui-colla-title">商品分类</h2>
<div class="layui-colla-content">商品分类列表</div>
</div>
<div class="layui-colla-item a5">
<h2 class="layui-colla-title">产品管理</h2>
<div class="layui-colla-content">产品管理列表</div>
</div>
<div class="layui-colla-item a6">
<h2 class="layui-colla-title">幻灯片管理</h2>
<div class="layui-colla-content">幻灯片管理列表</div>
</div>
</div>
</div>
<div class="layui-col-md9 main">
<div class=""></div>
<div class="administrator hidden">
123
</div>
<!-- ppt页面的内容 -->
<div class="ppt ">
<button class="layui-btn">首页首屏</button>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>排序</th>
<th>标题</th>
<th>URL</th>
<th>图片</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>0</td>
<td>卫斯理2:余文乐燃起科幻风雨</td>
<td>http://video.baidu.com/weisili</td>
<td><img src="" alt=""></td>
<td>
<button class="layui-btn layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-warm layui-btn-xs">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>卫斯理2:余文乐燃起科幻风雨</td>
<td>http://video.baidu.com/weisili</td>
<td><img src="" alt=""></td>
<td>
<button class="layui-btn layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-warm layui-btn-xs">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>卫斯理2:余文乐燃起科幻风雨</td>
<td>http://video.baidu.com/weisili</td>
<td><img src="" alt=""></td>
<td>
<button class="layui-btn layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-warm layui-btn-xs">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>卫斯理2:余文乐燃起科幻风雨</td>
<td>http://video.baidu.com/weisili</td>
<td><img src="" alt=""></td>
<td>
<button class="layui-btn layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-warm layui-btn-xs">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>卫斯理2:余文乐燃起科幻风雨</td>
<td>http://video.baidu.com/weisili</td>
<td><img src="" alt=""></td>
<td>
<button class="layui-btn layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-warm layui-btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="./layui-v2.4.5/layui/layui.js"></script>
<script>
layui.use('element', function(){
var element = layui.element;
});
function select(e){
console.log(e.target);
}
</script>
</body>
</html>
layui相比于elementUI和bootstrap来说，使用更为简单，复制粘贴就能直接使用，而且简单易学，了解过bootstrap的人，相信看一遍layui的 样式就已经掌握7成了。而且layui的默认样式让人很舒服，可以作为网站的主流色调。也非常感谢老师带我深入了解了这个框架，让我可以更 加迅速的制作网站了。
批改老师：灭绝师太批改时间：2018-11-03 10:00:00
老师总结：看了你的学习进度，觉得蛮快的，总得来说很棒……后面继续加油
