Blogger Information
Blog 29
fans 0
comment 0
visits 25291
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2.员工管理系统 后台首页2019年2月21日作业
连界现代周伟的博客
Original
741 people have browsed it

主要运用掌握<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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post