摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href=&quo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<title>小孔商城--后台管理系统</title>
<style>
*{margin: 0px;padding: 0px;}
.layui-colla-content{padding:0px;}
.layui-collapse{border: none;}
.layui-colla-title{background-color:#42485B;color: #fff;}
.layui-colla-content, .layui-colla-item{border-top: none;}
.layui-nav{border-radius: 0px;}
.layui-nav-tree .layui-nav-bar{background-color: darkgoldenrod;}
.logout a{color:#fff;}
.logout a:hover{color:#fff;}
</style>
</head>
<body>
<div style="background: #2E6DA4;width: 100%;height: 50px;line-height: 50px;color:#fff;">
<div style="font-size: 20px;padding-left: 10px; float: left; ">小孔商城--后台管理系统</div>
<div style="float: right;padding-right: 10px;">admin【系统管理员】<span><a href="javascript:;" onclick="tuichu()" >退出</a></span></div>
</div>
<div style="width:200px;background-color:#42485B;float:left;position: relative;">
<div lay-accordion>
<div>
<h2>管理员管理</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">管理员列表</a></li>
</ul>
</div>
</div>
<div>
<h2>权限管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">菜单管理</a></li>
<li><a href="">角色管理</a></li>
</ul>
</div>
</div>
<div>
<h2>系统设置</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">网站设置</a></li>
</ul>
</div>
</div>
<div>
<h2>商品分类</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">分类列表</a></li>
</ul>
</div>
</div>
<div>
<h2>产品管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">产品列表</a></li>
</ul>
</div>
</div>
<div>
<h2>幻灯片管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">首页首屏</a></li>
</ul>
</div>
</div>
</div>
</div>
<div style="float:left;position:absolute;left: 200px;right: 0px;"><iframe style="width: 100%;height: 100%;" src="welcome.html" frameborder="0" frameborder="no"></iframe></div>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use(['element','layer'], function(){
var element = layui.element;
var layer = layui.layer;
//…
});
function tuichu(){
layer.open({
content: '确定要退出么？',
icon: 3
,btn: ['确定', '取消']
,yes: function(index, layero){
//按钮【按钮一】的回调
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2019-02-03 15:16:15
老师总结：小孔商城是什么? *{margin: 0px;padding: 0px;}, 这样的样式, 以后尽可能少用
