abstract：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<title>后臺首頁</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.header{height:50px;line-height: 50px;background: #000000;color:#fff;}
.title{margin-left:20px;}
.user{float:right;margin-right: 20px;}
.user a{color:#fff;}
.menu{width:200px;background: #2B333B;position: absolute;}
.menu #declare1 *,#declare2 *,#declare3 *,#declare4 *,a[href="#declare1"],
a[href="#declare2"],a[href="#declare3"],a[href="#declare4"]{border-radius: 0;}
.content{position:absolute;left:200px;right: 0px;}
</style>
</head>
<body>
<div class="header">
<span class="title">商城后臺管理系統(tǒng)</span>
<span class="user">系統(tǒng)管理員 <span><a href="">退出</a></span></span>
</div>
<div class="menu">
<!--折疊菜單-->
<a href="#declare1" class="btn btn-primary btn-block" data-toggle="collapse">管理員管理</a>
<div class="collapse" id="declare1">
<div class="list-group">
<a href="#" class="list-group-item" onclick="menuFire(this)" src="admin.html">管理員列表</a>
</div>
</div>
<a href="#declare2" class="btn btn-primary btn-block" data-toggle="collapse">權(quán)限管理</a>
<div class="collapse" id="declare2" >
<div class="list-group">
<a href="#" class="list-group-item" onclick="menuFire(this)" src="form.html">基本信息填寫</a>
<a href="#" class="list-group-item">角色管理</a>
</div>
</div>
<a href="#declare3" class="btn btn-primary btn-block" data-toggle="collapse">系統(tǒng)管理</a>
<div class="collapse" id="declare3">
<div class="list-group">
<a href="#" class="list-group-item" >網(wǎng)站設(shè)置</a>
</div>
</div>
<a href="#declare4" class="btn btn-primary btn-block" data-toggle="collapse">商品分類</a>
<div class="collapse" id="declare4">
<div class="list-group">
<a href="#" class="list-group-item">商品列表</a>
</div>
</div>
</div>
<div class="content">
<iframe src="index.html" onload="resetShowHeight(this)" style="width:100%;height:100%;" frameborder="0" scrolling="0"></iframe>
</div>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/dist/js/bootstrap.js"></script>
<script>
$(document).ready(function(){
resetMenuHeight();
})
//重新設(shè)置菜單容器高度
function resetMenuHeight() {
var height=document.documentElement.clientHeight-50;
$('.menu').height(height)
}
//點擊菜單
function menuFire(obj){
//獲取url
var src=$(obj).attr('src')
$('iframe').attr('src',src)
}
//調(diào)整主操作頁面的高度
function resetShowHeight(obj){
var height=parent.document.documentElement.clientHeight-50;
$(obj).parent('div').height(height)
}
</script>
</body>
</html>總結(jié)：通過這一段時間對于bootstrap的學(xué)習(xí)，基本掌握了框架的使用，對于這個后臺的制作，更加鞏固了bootstrap框架的知識?，F(xiàn)在，我已經(jīng)學(xué)會了layui和bootstrap框架了，但是，還需要多加的練習(xí)。
Correcting teacher：天蓬老師Correction time：2018-11-30 11:47:26
Teacher's summary：上面和下面的邊距, 可以通過設(shè)置padding/ margin的負(fù)值來解決,試試看