admin.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>layout 后台大布局 - Layui</title>
  7. <link rel="stylesheet" href="../src/css/layui.css">
  8. </head>
  9. <body>
  10. <div class="layui-layout layui-layout-admin">
  11. <div class="layui-header">
  12. <div class="layui-logo">layui 后台布局</div>
  13. <!-- 头部区域(可配合layui已有的水平导航) -->
  14. <ul class="layui-nav layui-layout-left">
  15. <li class="layui-nav-item"><a href="">控制台</a></li>
  16. <li class="layui-nav-item"><a href="">商品管理</a></li>
  17. <li class="layui-nav-item"><a href="">用户</a></li>
  18. <li class="layui-nav-item">
  19. <a href="javascript:;">其它系统</a>
  20. <dl class="layui-nav-child">
  21. <dd><a href="">邮件管理</a></dd>
  22. <dd><a href="">消息管理</a></dd>
  23. <dd><a href="">授权管理</a></dd>
  24. </dl>
  25. </li>
  26. </ul>
  27. <ul class="layui-nav layui-layout-right">
  28. <li class="layui-nav-item">
  29. <a href="javascript:;">
  30. <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
  31. 贤心
  32. </a>
  33. <dl class="layui-nav-child">
  34. <dd><a href="">基本资料</a></dd>
  35. <dd><a href="">安全设置</a></dd>
  36. </dl>
  37. </li>
  38. <li class="layui-nav-item"><a href="">退了</a></li>
  39. </ul>
  40. </div>
  41. <div class="layui-side layui-bg-black">
  42. <div class="layui-side-scroll">
  43. <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
  44. <ul class="layui-nav layui-nav-tree" lay-filter="test">
  45. <li class="layui-nav-item layui-nav-itemed">
  46. <a class="" href="javascript:;">所有商品</a>
  47. <dl class="layui-nav-child">
  48. <dd><a href="javascript:;">列表一</a></dd>
  49. <dd><a href="javascript:;">列表二</a></dd>
  50. <dd><a href="javascript:;">列表三</a></dd>
  51. <dd><a href="">超链接</a></dd>
  52. </dl>
  53. </li>
  54. <li class="layui-nav-item">
  55. <a href="javascript:;">解决方案</a>
  56. <dl class="layui-nav-child">
  57. <dd><a href="javascript:;">列表一</a></dd>
  58. <dd><a href="javascript:;">列表二</a></dd>
  59. <dd><a href="">超链接</a></dd>
  60. </dl>
  61. </li>
  62. <li class="layui-nav-item"><a href="">云市场</a></li>
  63. <li class="layui-nav-item"><a href="">发布商品</a></li>
  64. </ul>
  65. </div>
  66. </div>
  67. <div class="layui-body">
  68. <!-- 内容主体区域 -->
  69. <div style="padding: 15px;">内容主体区域</div>
  70. </div>
  71. <div class="layui-footer">
  72. <!-- 底部固定区域 -->
  73. © layui.com - 底部固定区域
  74. </div>
  75. </div>
  76. <script src="../src/layui.js"></script>
  77. <script>
  78. //JavaScript代码区域
  79. layui.use('element', function(){
  80. var element = layui.element;
  81. });
  82. </script>
  83. </body>
  84. </html>