Correction status:Uncorrected
Teacher's comments:
主要运用掌握<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>
点击 "运行实例" 按钮查看在线实例