使用iframe实现网站后台架构和功能(网站后台首页代码):
实例
html>
后台布局:iframe.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;
}
.left li {
margin-top: 40px;
list-style: none;
}
.left a{
text-decoration: none;
}
.right {
float:left;
min-height: 500px;
min-width: 750px;
margin-left: 30px;
}
.right iframe {
min-width: inherit;
min-height: inherit;
border-left:1px solid #666;
}
网站后天管理系统 V1.0
admin 退出
- 用户管理
- 商品管理
- 系统设置
沙雕网络科技***©版权所有
(2018-2020)
运行实例 »
点击 "运行实例" 按钮查看在线实例
用户管理页面代码:
实例
html>
用户管理table, th, td {
border: 1px solid #666;
}
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
text-align: center;
line-height: 2em;
}
table caption {
margin: 20px 0 10px;
font-weight: bolder;
}
table tr:first-of-type {
background-color: lightgrey;
}
p {
text-align: center;
}
| id | 用户名 | 邮箱 | 级别 | 注册时间 | 操作 |
|---|---|---|---|---|---|
| 1 | 小王 | xw@php.cn | 普通 | 2019-03-23 | 编辑 删除 |
| 2 | 小张 | xz@php.cn | 钻石 | 2018-04-12 | 编辑 删除 |
| 3 | 老王 | lw@php.cn | 金牌 | 2017-12-10 | 编辑 删除 |
| 4 | 小李 | xl@php.cn | 银牌 | 2018-10-09 |

本文展示了如何使用Ajax和iframe技术来构建一个后台管理模板,包括用户登录、系统设置和商品管理等功能,并利用Bootstrap进行美化,提供了一个高效、简洁的后台架构示例。
最低0.47元/天 解锁文章
1728

被折叠的 条评论
为什么被折叠?



