摘要：學(xué)習(xí)Layui的感想：之前在工作中用到過(guò)easyui現(xiàn)在學(xué)習(xí)layui感覺還是比較順利的。學(xué)習(xí)的過(guò)程主要是看老師如何查文檔，以及掌握最基本的布局元素，加快修改和開發(fā)效率<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name
學(xué)習(xí)Layui的感想：
之前在工作中用到過(guò)easyui現(xiàn)在學(xué)習(xí)layui感覺還是比較順利的。學(xué)習(xí)的過(guò)程主要是看老師如何查文檔，以及掌握最基本的布局元素，加快修改和開發(fā)效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后臺(tái)管理系統(tǒng)</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="layui/layui.all.js"></script>
<script src="layui/layui.js"></script>
</head>
<body>
<!-- Header -->
<div class="header">
<div class="header_left">京東商城-后臺(tái)管理系統(tǒng)</div>
<div class="header_right">admin[系統(tǒng)管理員] <a href="javascript:;" onclick="logout()">退出</a></div>
</div>
<!-- 菜單 -->
<div class="menu" id="menu">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">管理員管理</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="Admin/admin_lists.html" target="main">管理員列表</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">權(quán)限管理</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="Admin/menu.html" target="main">菜單管理</a></li>
<li class="layui-nav-item"><a href="">角色管理</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//注意：折疊面板 依賴 element 模塊，否則無(wú)法進(jìn)行功能性操作
layui.use('element', function(){
var element = layui.element;
$=layui.jquery
resetHight()
});
function logout(){
layer.confirm('確定要退出嗎？', {
icon:3,
btn: ['確定','取消']
},function(index, layero){
//按鈕的回調(diào)
}, function(index){
//按鈕的回調(diào)
});
}
function resetHight(){
var y=document.documentElement.clientHeight-50;
$('#menu').height(y);
}
</script>
</div>
<!-- 主操作界面 -->
<div class="main">
<iframe src="welcome.htm" frameborder="0" name="main" style="width:100%;height:100%" scrollimg='0' frameborder='0'></iframe>
</div>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-01-18 17:19:32
老師總結(jié)：寫的很棒啊 后面是的項(xiàng)目也可以直接使用這個(gè)作為后臺(tái)模板哦