摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<title>JD商城后臺(tái)管理系統(tǒng)</title>
</head>
<style>
/*頭部*/
.header{width:100%; height:48px; background:RGB(46,109,164); color:#fff;}
.title{font-size: 20px; line-height:48px;margin-left: 20px;}
.userinfo{float: right; line-height: 48px; margin-right: 20px;}
.userinfo a{color:#fff;}
/*菜單部分*/
.menu{width:200px; background:RGB(51,55,68); position: absolute;}
.layui-collapse{border:none;}
.layui-colla-item{border:none; background:RGB(66,72,91);}
.layui-colla-title{background:RGB(66,72,91);color:#fff; }
.layui-colla-content{color:#fff; border:none;padding:0px; }
/*內(nèi)容部分*/
main{position: absolute; left:200px;}
</style>
<body>
<!-- 頭部 -->
<div class="header">
<span class="title">JD商城--后臺(tái)管理系統(tǒng)</span>
<span class="userinfo">admin 【系統(tǒng)管理員】 <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">
<!-- 菜單折疊內(nèi)容 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">管理員列表</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">選項(xiàng)1</a></dd>
<dd><a href="javascript:;">選項(xiàng)2</a></dd>
<dd><a href="">跳轉(zhuǎn)</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">權(quán)限管理</h2>
<div class="layui-colla-content layui-show">
<!-- 菜單折疊內(nèi)容 -->
<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">系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content layui-show">
<!-- 菜單折疊內(nèi)容 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">網(wǎng)站設(shè)置</a>
</li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">商品分類</h2>
<div class="layui-colla-content layui-show">
<!-- 菜單折疊內(nèi)容 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">網(wǎng)站設(shè)置</a><a href="javascript:;">分類列表</a>
</li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">產(chǎn)品管理</h2>
<div class="layui-colla-content layui-show">
<!-- 菜單折疊內(nèi)容 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">產(chǎn)品列表</a>
</li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">幻燈片管理</h2>
<div class="layui-colla-content layui-show">
<!-- 菜單折疊內(nèi)容 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">首頁(yè)首屏</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 內(nèi)容區(qū)域 -->
<div class="main">
<!-- frameborder=0 不顯示內(nèi)聯(lián)樣式邊框； scrolling="0"內(nèi)聯(lián)樣式從不顯示滾動(dòng)條（即使需要） -->
<iframe style="width: 100%;height: 100%;"frameborder="0"; scrolling="0"; src="layui/welcome.html" ></iframe>
</body>
</html>
總結(jié)：像這種后臺(tái)框架比較多的時(shí)候，使用layui來(lái)制作比較方便快捷，只需要復(fù)制粘貼到指定位置，然后稍微使用CSS設(shè)置下樣式內(nèi)容即可
批改老師：韋小寶批改時(shí)間：2019-03-12 09:27:40
老師總結(jié)：總結(jié)的沒(méi)毛病 后臺(tái)框架的確是很多 但是layui是不僅僅可以作為后臺(tái)頁(yè)面的框架也可以作為前臺(tái)的框架哦