摘要：后台登陆后页面主要用到了 layui 的面板和导航两个元素,引入后只需简单修改代码即可实现自定义的效果,用起来十分方便 需要注意导航和 frame 框架的定位样式,以及顶部部分的浮动属性. 后面加上 js 后网页才能实现更好的效果 案例实现:代码:<!DOCTYPE html> <html lang="en"> <he
后台登陆后页面主要用到了 layui 的面板和导航两个元素,引入后只需简单修改代码即可实现自定义的效果,用起来十分方便 需要注意导航和 frame 框架的定位样式,以及顶部部分的浮动属性. 后面加上 js 后网页才能实现更好的效果
案例实现:
代码:
<!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">
京东商城 - - 后台管理系统
</span>
<span class="usr">admin-[系统管理员]-<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:;">默认展开</a>
</li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">权限管理</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系统设置</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系统设置</h2>
<div class="layui-colla-content layui-show"> 内容区域 </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系统设置</h2>
<div class="layui-colla-content layui-show"> 内容区域</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>欢迎使用后台管理系统</h1> </div> </body> </html>
批改老师：查无此人批改时间：2019-01-04 13:43:06
老师总结：做的不错，框架有便捷的地方，也有不足的地方，理解透彻，会更好的完成功能。继续加油。
