abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <!-- 引入layui样式文件 --> <link rel="styleshe
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <!-- 引入layui样式文件 --> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <!-- 引入layui基础核心库 --> <script type="text/javascript" src="layui/layui.js"></script> <style> .header{width:100%;height:50px;line-height: 50px;background: #2E6DA4;color:#fff;} .title{margin-left: 20px;font-size: 20px;} .userinfo{float: right;margin-right: 10px;} .userinfo a{color:#fff;} .menu{width:200px;height:100%;background: #333744;position: absolute;} .main{position: absolute;left:200px;right:0px;} .layui-collapse{border:none;} .layui-colla-item{border-top:none;} .layui-colla-title{background: #42485b;color:#fff;} .layui-colla-content{border-top:none;padding: 0px;} </style> </head> <body> <!-- 头部 --> <div class="header"> <span class="title">京东商城--后台管理系统</span> <span class="userinfo">admin 【系统管理员】<span><a href="">退出</a></span></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"> <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"> <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"> <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"> <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"> <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> </div> <!-- 主操作页面 --> <div class="main"> <iframe src="welcome.html" frameborder="0" style="width: 100%;height: 100%" scrolling="0"></iframe> </div> </body> </html> welcome.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="text-align: center;color:gray;font-size: 20px;"> <h1>欢迎使用后台管理系统</h1> </div> </body> </html>
Correcting teacher:韦小宝Correction time:2018-12-21 17:09:41
Teacher's summary:写的很不错哦!layui写出来的界面还是很简洁好看的!