摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<title>JD商城后台管理系统</title>
</head>
<style>
/*头部*/
.header{width:100%; height:48px; background:RGB(46,109,164); color:#fff;}
.title{font-size: 20px; line-height:48px;margin-left: 20px;}
.userinfo{float: right; line-height: 48px; margin-right: 20px;}
.userinfo a{color:#fff;}
/*菜单部分*/
.menu{width:200px; background:RGB(51,55,68); position: absolute;}
.layui-collapse{border:none;}
.layui-colla-item{border:none; background:RGB(66,72,91);}
.layui-colla-title{background:RGB(66,72,91);color:#fff; }
.layui-colla-content{color:#fff; border:none;padding:0px; }
/*内容部分*/
main{position: absolute; left:200px;}
</style>
<body>
<!-- 头部 -->
<div class="header">
<span class="title">JD商城--后台管理系统</span>
<span class="userinfo">admin 【系统管理员】 <span><a href="">退出</a></span> </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">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">管理员列表</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</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">
<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">
<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">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">网站设置</a><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">
<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">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">首页首屏</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 内容区域 -->
<div class="main">
<!-- frameborder=0 不显示内联样式边框； scrolling="0"内联样式从不显示滚动条（即使需要） -->
<iframe style="width: 100%;height: 100%;"frameborder="0"; scrolling="0"; src="layui/welcome.html" ></iframe>
</body>
</html>
总结：像这种后台框架比较多的时候，使用layui来制作比较方便快捷，只需要复制粘贴到指定位置，然后稍微使用CSS设置下样式内容即可
批改老师：韦小宝批改时间：2019-03-12 09:27:40
老师总结：总结的没毛病 后台框架的确是很多 但是layui是不仅仅可以作为后台页面的框架也可以作为前台的框架哦
