使用iframe 实现网站后台架构与功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用iframe 实现网站后台架构与功能</title>
<style>
.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.top {
height: 60px;
width: 100%;
float: left;
border-bottom: 1px solid #666;
background-color: lightgrey;
}
.left {
float: left;
min-height: 500px;
min-width: 160px;
margin-left: 30px;
/*background-color: lightcoral;*/
}
.left li {
margin-top: 40px;
list-style: none;
}
.left a {
text-decoration: none;
}
.right {
float: left;
min-height: 450px;
min-width: 750px;
margin-left: 30px;
/*background-color: lightgreen;*/
}
.right iframe {
min-width: inherit;
min-height: inherit;
border-left: 1px solid #666;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<p style="float:left">网站管理后台</p>
<p style="float:right">admin <a href="">退出</a></p>
</div>
<div class="left">
<ul>
<li><a href="user.html" target="content">用户管理</a></li>
<li><a href="goods.html" target="content">商品管理</a></li>
<li><a href="system.html" target="content">系统设置</a></li>
</ul>
</div>
<div class="right">
<iframe src="welcome.html" frameborder="0" name="content"></iframe>
<p style="margin-top: -50px; text-align: center;">沙雕网络科技***©版权所有 <br> (2018-2020)</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
