abstract：<!DOCTYPE html><html><head> <title>后台管理系统</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../layui
<!DOCTYPE html>
<html>
<head>
<title>后台管理系统</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>
<style type="text/css" media="screen">
.head{
width: 100%;
height: 50px;
line-height: 50px;
background: #2e6da4;
color: #fff;
}
.title{
margin-left: 20px;
font-size: 20px;
}
.userinfo{
float: right;
margin-right: 10px;
}
.userinfo a{
color: white;
}
.menu{
border: none;
height: 100%;
}
.main{
position: absolute;
text-align: center;
color: #ccc;
font-size: 20px;
float: right;
display: inline-block;
margin-left: 28%;
}
.layui-collapse{
border: none;
float: left;
}
.layui-colla-item{
border: none;
}
</style>
</head>
<body>
<div class="head">
<span class="title">京东商城 —— —— 后台管理系统</span>
<span class="userinfo">admin 【系统管理员】 <span> <a href="" title=""> 退出 </a></span></span>
</div>
<div class="menu" id="menu">
<div class="layui-collapse">
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
<li class="layui-nav-item">
<a href="javascript:;">管理员管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项一</a></dd>
<dd><a href="javascript:;">选项二</a></dd>
<dd><a href="javascript:;">选项三</a></dd>
<dd><a href="">跳转项</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">权限管理</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">系统设置</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</div>
</div>
<div class="main">
<h1>欢迎使用后台管理系统</h1>
</div>
<div style="clear: both;"></div>
<script>
layui.use('element', function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function(elem){
//console.log(elem)
layer.msg(elem.text());
});
});
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-02-02 12:01:49
Teacher's summary：layUI做为国内近几年比较流行的前端框架, 也国外流行的框架相比, 有一些自己的特点,但还有很多不完善的地方, 有些地方, 还是要写原生, 不可一味的依赖它