摘要：部分代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &n
部分代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统HOME页面</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<style type="text/css">
*{padding:0px;margin: 0px;}
.header{height: 50px;width: 100%;background: #2E6DA4;color: #fff;line-height: 50px;}
.title{font-size: 20px;margin-left: 20px;}
.useinfo{float: right;font-size: 15px;margin-right: 10px;}
.useinfo a{color: #fff;text-decoration: none;}
.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: 0px;}
.main{position: absolute;left: 200px;right: 0px;}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<span>JD--后台管理</span>
<span>admin【系统管理员】 <span><a href="javascript:;" onclick="logoout()">退出</a></span></span>
</div>
<!-- 侧边栏 -->
<div id="menu">
<div lay-accordion>
<div>
<h2>管理员管理</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:;" src="admin.html" onclick="menuFlie(this)">管理员列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>权限管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="menu.html" onclick="menuFlie(this)">菜单管理</a>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="adminManage.html" onclick="menuFlie(this)">角色管理</a>
</li>
</ul>
</div>
</div>
<div>
<h2>系统设置</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="shopName.html" onclick="menuFlie(this)">网站设置</a>
</li>
</ul>
</div>
</div>
<div>
<h2>商品分类</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="category.html" onclick="menuFlie(this)">分类列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>产品管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="product.html" onclick="menuFlie(this)">产品列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>幻灯片管理</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"src="first.html" onclick="menuFlie(this)">首页首屏</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 主操作页面 -->
<div>
<iframe src="welcome.html" onload="resetMainHeight(this)" frameborder="0" style="width: 100%;height: 100%;" scrolling="0"></iframe>
</div>
<script>
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
$=layui.jquery;
resetMenuHeight();
});
function logoout(){
layer.confirm('确认退出吗？', {
icon:3,
btn: ['确认', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
//重新设置菜单容器高度
function resetMenuHeight(obj){
var height=document.documentElement.clientHeight-50;
$('#menu').height(height)
}
//菜单点击
function menuFlie(obj){
//获取url
var src=$(obj).attr('src');
//改变框架内的页面
$('iframe').attr('src',src);
}
//设置主操作页面的高度
function resetMainHeight(obj){
var height=parent.document.documentElement.clientHeight-50;
$(obj).parent('div').height(height)
}
</script>
</body>
</html>
总结：
layui的常用页面元素有：按钮，表格，表单
layui框架的搭建难点是在js函数的调用
运用的js功能函数：
设置主操作页面的高度；获取浏览器窗口的位置（文档位置）；显示预览图片。
批改老师：灭绝师太批改时间：2019-01-04 09:18:03
老师总结：总的来说，layui还是比较简单的，熟悉组件，会看文档，结合之前学习js,jq,效果更好！
