abstrak：<!DOCTYPE html><html><head> <title>后臺管理系統(tǒng)</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../layui
<!DOCTYPE html>
<html>
<head>
<title>后臺管理系統(tǒng)</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">京東商城 —— —— 后臺管理系統(tǒng)</span>
<span class="userinfo">admin 【系統(tǒng)管理員】 <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:;">選項(xiàng)一</a></dd>
<dd><a href="javascript:;">選項(xiàng)二</a></dd>
<dd><a href="javascript:;">選項(xiàng)三</a></dd>
<dd><a href="">跳轉(zhuǎn)項(xiàng)</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">權(quán)限管理</a>
<dl class="layui-nav-child">
<dd><a href="">移動(dòng)模塊</a></dd>
<dd><a href="">后臺模版</a></dd>
<dd><a href="">電商平臺</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">系統(tǒng)設(shè)置</a>
<dl class="layui-nav-child">
<dd><a href="">移動(dòng)模塊</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="">社區(qū)</a></li>
</ul>
</div>
</div>
<div class="main">
<h1>歡迎使用后臺管理系統(tǒng)</h1>
</div>
<div style="clear: both;"></div>
<script>
layui.use('element', function(){
var element = layui.element; //導(dǎo)航的hover效果、二級菜單等功能，需要依賴element模塊
//監(jiān)聽導(dǎo)航點(diǎn)擊
element.on('nav(demo)', function(elem){
//console.log(elem)
layer.msg(elem.text());
});
});
</script>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-02-02 12:01:49
Rumusan guru：layUI做為國內(nèi)近幾年比較流行的前端框架, 也國外流行的框架相比, 有一些自己的特點(diǎn),但還有很多不完善的地方, 有些地方, 還是要寫原生, 不可一味的依賴它