后台管理iframe结构结合layui制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录后台</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<style type="text/css">
.header{height: 50px;width:100%;background-color:#1E66A6 ;line-height: 50px;}
.title{color:#AFB0B1;font-size:16px;margin-left:20px;}
.menu{width:200px;background-color:#333844;position: absolute;height:100%;}
.layui-colla-title,.layui-collapse,.layui-colla-item,.layui-colla-content{border:none;color:#fff;}
.layui-colla-title{background-color:#42475B;}
.main{position: absolute;left:200px;top:50px;}
iframe{width:100%;height: 100%;}
</style>
</head>
<body >
<div>
<span>京东商城后台管理系统</span>
</div>
<div>
<div lay-accordion>
<div>
<h2>杜甫</h2>
<div>内容区域</div>
</div>
<div>
<h2>李清照</h2>
<div>内容区域</div>
</div>
<div>
<h2>鲁迅</h2>
<div>内容区域</div>
</div>
</div>
</div>
<div>
<iframe src="2-71.html" scrolling="0" frameborder="0"></iframe>
</div>
<script src="layui/layui.js"></script>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>