主要运用掌握<a>标签的target属性 与<iframe>标签的name属性之间的关系
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理系统</title>
<style>
* {
margin: 0;
padding: 0;
}
.mc {
margin: 0 auto;
}
/* 头部样式 */
.header {
width: 100%;
height: 60px;
border-bottom: 2px solid #ccc;
line-height: 60px;
}
.header .content {
width: 80%;
}
.header .content h3 {
float: left;
}
.header .content p {
float: right;
}
/* 主体样式 */
.main {
width: 80%;
min-height: 650px;
position: relative;
}
.main .left {
width: 200px;
min-height: inherit;
border-right: 2px solid #ccc;
position: absolute;
left: 0;
top: 0;
}
.main .right {
width: 800px;
min-height: inherit;
position: absolute;
left: 202px;
top: 0;
}
/* 左侧菜单样式 */
.main .left ul {
position: absolute;
left: 30px;
top: 50px;
}
.main .left li {
list-style: none;
line-height: 50px;
}
.main .left li a {
text-decoration: none;
}
.main .left li a:hover {
text-decoration: underline;
color: red;
}
/* 右侧工作区样式 */
.main .right iframe {
width: 80%;
min-height: 650px;
border: none;
}
.main .right p {
text-align: center;
margin-top: -100px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content mc">
<h3>员工管理系统</h3>
<p>管理员: admin | <a href="">退出</a></p>
</div>
</div>
<!-- 中间主体内容部分 -->
<div class="main mc">
<!-- 左侧菜单 -->
<div class="left">
<ul>
<li><a href="staff_list.php" target="workspace">员工管理</a></li>
<li><a href="system.php" target="workspace">系统设置</a></li>
<li><a href="user_list.php" target="workspace">用户设置</a></li>
</ul>
</div>
<!-- 右侧内容 -->
<div class="right">
<iframe src="staff_list.php" name="workspace"></iframe>
<p>现代电脑工作室 © 版权所有(2019-2029)</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
