摘要：<!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>小孔商城--后臺管理系統(tǒng)</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; ">小孔商城--后臺管理系統(tǒng)</div>
<div style="float: right;padding-right: 10px;">admin【系統(tǒng)管理員】<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>權(quán)限管理</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>系統(tǒng)設(shè)置</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">網(wǎng)站設(shè)置</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>產(chǎn)品管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="">產(chǎn)品列表</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 模塊，否則無法進(jìn)行功能性操作
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){
//按鈕【按鈕一】的回調(diào)
}
,btn2: function(index, layero){
//按鈕【按鈕二】的回調(diào)
//return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
,cancel: function(){
//右上角關(guān)閉回調(diào)
//return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
});
}
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-02-03 15:16:15
老師總結(jié)：小孔商城是什么? *{margin: 0px;padding: 0px;}, 這樣的樣式, 以后盡可能少用