实例 bootstrap
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BOOTCSS网站后台</title>
<link href="./static/css/bootstrap.css" rel="stylesheet">
<style>
.navbar{
margin-bottom: 0;
.clearfix();
}
.col-md-4 ul{
padding-left:0;
}
.col-md-4 ul li{
list-style: none;
margin-top: 50px;
font-size: 20px;
text-align: center;
}
#qq a{
text-decoration: none;
color: #398439;
}
/*导航栏高度*/
.navbar-inverse{
/*height: 100px;*/
}
/*网站管理页面几个字*/
.navbar-inverse .navbar-brand{
font-size: 20px;
color: #4cae4c;
}
/*用户管理三个按钮*/
.nav{
margin-left: 50px;
}
/*左侧a标签*/
.list-group{
text-align: center;
margin: 0 auto;
margin-top: 50px;
}
.list-group a:hover{
background-color: #c4e3f3;
border-bottom:1px solid orangered;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">网站后台管理页面</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">用户管理 <span class="sr-only">(current)</span></a></li>
<li><a href="#">商品管理</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- <form class="navbar-form navbar-left">-->
<!-- <div class="form-group">-->
<!-- <input type="text" class="form-control" placeholder="Search">-->
<!-- </div>-->
<!-- <button type="submit" class="btn btn-default">Submit</button>-->
<!-- </form>-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">admin</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">个人中心</a></li>
<li><a href="#">微博管理</a></li>
<li><a href="#">我的网盘</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-2" style="background-color: #7bb7fa;min-height: 800px;">
<div class="list-group">
<!-- 如果show(this)没有设置，return false 默认跳转，定义函数后就不跳转了-->
<a class="list-group-item" href="user.html" onclick="show(this);return false">用户管理</a>
<a class="list-group-item" href="goods.html" onclick="show(this);return false">商品管理</a>
<a class="list-group-item" href="system.html" onclick="show(this);return false;">系统设置</a>
</div>
</div>
<div class="col-md-8" style="min-height: 800px;">
<div class="right">
<!-- <iframe src="welcome.html" frameborder="0" name="content"></iframe>-->
<div class="content" style="height: 705px"></div></div>
<div style="margin-bottom: 0; text-align: center;"> <p >铁牛网络科技***©版权所有 <br> (2018-2020)</p></div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: #7bb7fa;min-height: 800px;">
<div class="list-group">
<!-- 如果show(this)没有设置，return false 默认跳转，定义函数后就不跳转了-->
<a class="list-group-item" href="user.html" onclick="show(this);return false">用户管理</a>
<a class="list-group-item" href="goods.html" onclick="show(this);return false">商品管理</a>
<a class="list-group-item" href="system.html" onclick="show(this);return false;">系统设置</a>
</div>
</div>
</div>
</div>
<script src="./static/js/jquery-3.4.1.js"></script>
<script src="./static/js/bootstrap.js"></script>
<script >
window.onload=function () {
show(this);
}; //等同于把onload放到 body 下边,onload是一个windows事件,this 就代表这个 windows事件
function show(ele) {
// 如果当前标签(body标签无href值)无法获取到href,则取默认值: welcomw.html
var url = ele.href ||'welcome.html' ; //当刷新网页时候，不点击任何按钮，不会运行show()函数和里面的代码，
// body里面的onload事件是让整个页面加载完成后在运行一次这个函数，body onload强制运行show函数
//但是body里面没有href属性，所以他会运行 或 后边的 值，body onload 强制运行一次这个show函数
console.log(ele);
// 1. 创建Ajax请求对象
var request = new XMLHttpRequest();
// 2. 监听成功回调
request.onreadystatechange = function () {
if (request.readyState === 4) {
// 用返回的内容,更新页面DOM元素内容
var content = document.getElementsByClassName('content').item(0);
// console.log(request.responseText);
content.innerHTML = request.responseText;
}
};
// 3. 配置请求参数
request.open('GET', url, true);
// 4. 发送请求
request.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe后台布局</title>
<style>
.top{
border: 1px solid lightskyblue;
min-height: 60px;
width: 1000px;
background-color: #999999;
margin: 0 auto;
font-size: 30px;
color: blue;
line-height: 60px;
/*给top里面的元素清除浮动，有浮动必须清除*/
overflow: hidden;
}
.top p:first-of-type{
float:left;
margin-left: 40px;
}
.top p:last-of-type{
float:right;
margin-right: 40px;
}
.container{
width:1000px;
margin: 0 auto;
/*清除主体部分的浮动，有浮动必须清除*/
overflow: hidden;
}
.left{
min-width:200px;
min-height: 800px;
background-color: lightskyblue;
float:left;
}
.left ul{
text-align: center;
padding-left:0 ;
}
.left li{
/*去掉小圆点*/
list-style: none;
margin-top: 50px;
font-size: 20px;
}
.left a{
/*去掉A标签的下划线*/
text-decoration: none;
}
.right{
/*min-width:796px ;*/
/*height: 730px;*/
float: left;
}
</style>
</head>
<body onload="show(this)">
<div class="top">
<p>我的网站管理后台</p>
<p>admin <a href="#">退出</a></p>
</div>
<div class="container">
<div class="left">
<ul>
<li> <a href="user.html" onclick="show(this); return false;">用户管理</a></li>
<li> <a href="goods.html" onclick="show(this); return false;" >商品管理</a></li>
<li> <a href="system.html" onclick="show(this); return false;" >系统设置</a></li>
</ul>
</div>
<div class="right">
<!-- ajax不用框架了，用DIV-->
<!-- <iframe name="iframe" frameborder="0" src="welcome.html"></iframe>-->
<div id="htm" style="width:796px;height: 730px" ></div>
<p style="margin-bottom: 50px; text-align: center; font-size: 10px;">游云网络科技***©版权所有 <br> (2018-2020)</p>
</div>
</div>
<script>
// ajax加载网页
function show(ele){
var url=ele.href || 'welcome.html';
console.log(url);
var res= new XMLHttpRequest();
res.onreadystatechange=function(){
if (res.readyState===4){
var htm = document.getElementById('htm');
console.log(res.responseText);
htm.innerHTML=(res.responseText);
}
};
//发送要放在 onreadystaechange()的外边
res.open('GET',url,true);
res.send('null');
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe后台布局</title>
<style>
.top{
border: 1px solid lightskyblue;
min-height: 60px;
width: 1000px;
background-color: #999999;
margin: 0 auto;
font-size: 30px;
color: blue;
line-height: 60px;
/*给top里面的元素清除浮动，有浮动必须清除*/
overflow: hidden;
}
.top p:first-of-type{
float:left;
margin-left: 40px;
}
.top p:last-of-type{
float:right;
margin-right: 40px;
}
.container{
width:1000px;
margin: 0 auto;
/*清除主体部分的浮动，有浮动必须清除*/
overflow: hidden;
}
.left{
min-width:200px;
min-height: 800px;
background-color: lightskyblue;
float:left;
}
.left ul{
text-align: center;
padding-left:0 ;
}
.left li{
/*去掉小圆点*/
list-style: none;
margin-top: 50px;
font-size: 20px;
}
.left a{
/*去掉A标签的下划线*/
text-decoration: none;
}
.right{
float: left;
}
iframe{
min-width:796px ;
min-height: 730px;
}
</style>
</head>
<body>
<div class="top">
<p >我的网站管理后台</p>
<p>admin <a href="#">退出</a></p>
</div>
<div class="container">
<div class="left">
<ul>
<li> <a href="user.html" target="iframe">用户管理</a></li>
<li> <a href="goods.html" target="iframe">商品管理</a></li>
<li> <a href="system.html" target="iframe">系统设置</a></li>
</ul>
</div>
<div class="right">
<iframe name="iframe" frameborder="0" src="welcome.html"></iframe>
<p style="margin-bottom: 50px; text-align: center; font-size: 10px;">游云网络科技***©版权所有 <br> (2018-2020)</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例