サマリー：后臺登陸后頁面主要用到了 layui 的面板和導(dǎo)航兩個(gè)元素,引入后只需簡單修改代碼即可實(shí)現(xiàn)自定義的效果,用起來十分方便 需要注意導(dǎo)航和 frame 框架的定位樣式,以及頂部部分的浮動(dòng)屬性. 后面加上 js 后網(wǎng)頁才能實(shí)現(xiàn)更好的效果 案例實(shí)現(xiàn):代碼:<!DOCTYPE html> <html lang="en"> <he
后臺登陸后頁面主要用到了 layui 的面板和導(dǎo)航兩個(gè)元素,引入后只需簡單修改代碼即可實(shí)現(xiàn)自定義的效果,用起來十分方便 需要注意導(dǎo)航和 frame 框架的定位樣式,以及頂部部分的浮動(dòng)屬性. 后面加上 js 后網(wǎng)頁才能實(shí)現(xiàn)更好的效果
案例實(shí)現(xiàn):
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css">
<script src="../layui-v2.4.5/layui/layui.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 50px;
line-height: 50px;
background: #2e6da4;
color: white;
}
.title {
font-size: 20px;
margin-left: 20px;
}
.usr {
margin-right: 10px;
color: #fff;
float: right;
}
.menu {
width: 200px;
background-color: #333744;
position: absolute;
}
.layui-collapse {
border: none;
}
.layui-colla-item {
border-top: none;
}
.layui-colla-title {
background-color: #42485b;
color: #fff;
}
.layui-colla-content {
border-top: 0;
padding: 0;
}
.main {
left: 200px;
right: 0;
position: absolute;
}
</style>
</head>
<body>
<div class="header">
<span class="title">
京東商城 - - 后臺管理系統(tǒng)
</span>
<span class="usr">admin-[系統(tǒng)管理員]-<a href="" style="color:white">退出</a></span>
</div>
<div class="menu">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">管理員管理</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認(rèn)展開</a>
</li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">權(quán)限管理</h2>
<div class="layui-colla-content layui-show">內(nèi)容區(qū)域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content layui-show">內(nèi)容區(qū)域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content layui-show"> 內(nèi)容區(qū)域 </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content layui-show"> 內(nèi)容區(qū)域</div>
</div>
</div>
</div>
<div class="main">
<iframe src="后臺main.html" style="width:100%;height:100%;" frameborder=0 scroling=0>
</iframe>
</div>
</body>
</html>iframe:
<!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>Document</title> </head> <body> <div style="color:grey;font-size:20px;text-align:center;"> <h1>歡迎使用后臺管理系統(tǒng)</h1> </div> </body> </html>
添削の先生：查無此人添削時(shí)間：2019-01-04 13:43:06
先生のまとめ：做的不錯(cuò)，框架有便捷的地方，也有不足的地方，理解透徹，會更好的完成功能。繼續(xù)加油。