模拟JD后台
骑师2019-01-20 21:32:56301<!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>JD商城后台</title>
<!-- 引入layui文件 -->
<link rel="stylesheet" type="text/css" href="css/lib/layui/layui.css">
<script type="text/javascript" src="js/lib/layui/layui.js"></script><!-- 引入基础核心库 -->
<style>
.header
{
width: 100%; height: 50px; line-height: 50px; background-color: #2e6da4;color:#fff;
}
.userinfo{float: right;margin-right: 10px;}
.userinfo a{color:#ffffff;}
.menu{
width: 100px; border: 1px solid red; position: absolute;
}
.layui-collapse{border: none;}
.layui-colla-item{border-top: none;}
.layui-colla-title{background: #42485b;color:#ffffff;}
.layui-colla-content{border-top: none;padding: 0px;}
.main{position: absolute;left: 200px;right: 0px;}
</style>
</head>
<body>
<!-- header -->
<div class="header">
<span style="margin-left: 20px;font-size: 20px;">JD商城--后台管理系统</span>
<span class="userinfo">admin【系统管理员】<span><a href="javascript:;" onclick="logout()" >退出</a></span></span>
</div>
<!-- menu -->
<div class="menu" id="menu">
<div class="layui-collapse" lay-accordion>
<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="welcome.html" onload="resetMainHeight(this)" style="width: 100%;height: 100%;"frameborder="0" scrolling="0" ></iframe>
</div>
</body>
</html>