Layui官方网站
官方网站:https://www.layui.com/
下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v=
创建项目
省略
创建static目录 将下载的项目复制到static目录中
SMS:. ├─.idea └─static ├─css │ └─modules │ ├─laydate │ │ └─default │ └─layer │ └─default ├─font ├─images │ └─face └─lay └─modules
创建index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>电商后台系统</title> <link rel="stylesheet" href="static/css/layui.css"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">电商后台系统</div> <!-- 头部区域（可配合layui已有的水平导航） --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">控制台</a></li> <li class="layui-nav-item"><a href="">设置</a></li> <li class="layui-nav-item"><a href="">会员</a></li> <li class="layui-nav-item"><a href="">商品</a></li> <li class="layui-nav-item"><a href="">交易</a></li> <li class="layui-nav-item"><a href="">门店</a></li> <li class="layui-nav-item"><a href="">网站</a></li> <li class="layui-nav-item"><a href="">营销</a></li> <li class="layui-nav-item"><a href="">统计</a></li> <li class="layui-nav-item"><a href="">手机端</a></li> <li class="layui-nav-item"><a href="">微信</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系统</a> <dl class="layui-nav-child"> <dd><a href="">邮件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授权管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 张三 </a> <dl class="layui-nav-child"> <dd><a href="">基本资料</a></dd> <dd><a href="">安全设置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退出系统</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">商品管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">商品分类</a></dd> <dd><a href="javascript:;">品牌管理</a></dd> <dd><a href="javascript:;">类型管理</a></dd> <dd><a href="javascript:;">规格管理</a></dd> <dd><a href="javascript:;">商品管理</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">其他管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">地区管理</a></dd> <dd><a href="javascript:;">空间管理</a></dd> <dd><a href="javascript:;">到货通知</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市场</a></li> <li class="layui-nav-item"><a href="">发布商品</a></li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 5px;height:100%;width:100%"> <!-- 内容主体区域 --> <iframe src="good.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%;"></iframe> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> © blb.com - 底部固定区域 </div> </div> <script src="static/layui.js"></script> <script> //JavaScript代码区域 layui.use('element', function(){ var element = layui.element; }); </script> </body> </html>
创建商品页面 good.html