网页导航3段式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tt</title>
    <link href="frame.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="dtop"><h1>system management</h1></div>
<div id="dleft">
    <div class="menu">
        <ul>
    <li><a href="CategoryList.html" target="content">cate</a></li>
    <li><a href="ProductList.html" target="content">product</a></li>
        </ul>
    </div>
</div>
<div id="dcontent">
    <iframe name="content" width="100%" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>

有这个target=content就可以了。

frame.css

#dtop {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background-color: #1f95c0;
}

#dleft {
    position: fixed;
    top: 100px;
    left: 0;
    height: 100%;
    width: 150px;
    overflow: hidden;
    vertical-align: top;
    background-color: #d4d8bd;

}

#dcontent {
    position: fixed;
    left: 150px;
    top: 100px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    border-top: solid 2px #70cbea;
    border-left: solid 2px #70cbea;
}

* html body {
    padding: 100px 0 0 150px;

}

* html #dcontent {
    height: 100%;
    width: 100%;
}

* html #dtop {
    width: 100%;
}

posted on 2016-02-04 16:47 lypzxy 阅读(265) 评论(0) 编辑收藏举报