后台管理首页

Original 2019-01-09 23:24:40 232
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="../layui/c
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src='../layui/js/layui.js'></script>
<style>
.header{width: 100%;height: 50px;line-height: 50px;background: #2e6da4;color: #fff;}
.header .title{margin-left: 20px;font-size: 20px;float: left;}
.header .userInfo{float: right;margin-right: 20px;}
.header .userInfo a{ color: #fff; }
    #main{position:absolute;left: 200px;width: 100%;}

.menu{ width: 200px;background: #333744;position: absolute; }
.layui-collapse{border:none;}
.layui-colla-item{border-top: none;}
.layui-colla-content .layui-colla-title{background: #42485b;color: #fff;}
.layui-colla-content{padding: 0;}

</style>
</head>
<body>
<div>
<div>后台管理系统</div>
<div>admin[系统管理员]   &nbsp;&nbsp; <a href="">退出</a></div>
</div>
<div id='menu'>
<div>
  <div>
    <h2>管理员管理</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>
  <li>
    <a href="javascript:;">解决方案</a>
  </li>
</ul>

    </div>
  </div>
  <div>
    <h2>权限设置</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>
  <li>
    <a href="javascript:;">解决方案</a>
  </li>
</ul>
</div>
  </div>
  <div>
    <h2>系统设置</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>
  <li>
    <a href="javascript:;">解决方案</a>
  </li>
</ul>
</div>
  </div>
    <div>
    <h2>系统设置</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>
  <li>
    <a href="javascript:;">解决方案</a>
  </li>
</ul>
</div>
  </div>
    <div>
    <h2>系统设置</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>
  <li>
    <a href="javascript:;">解决方案</a>
  </li>
</ul>
</div>
  </div>
    <div>
    <h2>系统设置</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>
  <li>
    <a href="javascript:;">解决方案</a>
  </li>
</ul>
</div>
  </div>
</div>
</div>
<div id="main">
<iframe src="welcome.html" style="width: 100%;height: 100%"  frameborder="0" scrolling="0"></iframe>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="text-align: center;color: gray;font-size: 20px">
<h1>欢迎使用后台管理系统</h1>
</div>

</body>
</html>


Correcting teacher:天蓬老师Correction time:2019-01-10 08:52:07
Teacher's summary:<iframe src="welcome.html">后台主体用它来渲染, 是大多数后台的用法

Release Notes

Popular Entries