iframe上左右布局

最新推荐文章于 2024-08-18 21:47:24 发布

置顶 sunny-Jin

最新推荐文章于 2024-08-18 21:47:24 发布

阅读量3w

点赞数 15

文章标签： iframe 框架布局

本文链接：https://blog.csdn.net/jzy1990/article/details/75806600

版权

最近在开发一个项目，frameset居然被淘汰，纳尼？这也算，好吧，我太落后了，一直都在使用frameset布局，在网上找了点资料来看，网上没有一个完整的demo，故写一个，给需要的人。

文件结构分为四个，top.html,left.html,content.html,index.html。

（1）top.html就是放logo，用户信息，显示时间等信息的地方啦。

（2）left.html是放导航的地方。

（3）content.html则是内容显示的地方，点击导航的某一项，在content.html页面上显示。

（4）index.html是前三个页面组合的地方，配置各个页面所占比例。

好了，让我们来看看下面的代码吧。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <style>
        #iframeTop{
            width: 100%;
            height: 70px;
        }
        #iframeLeft{
            width: 15%;
            height: 700px;
            float: left;
        }
        #iframeContent{
            width: 84%;
            height: 700px;
        }
    </style>
<body>
<div>
    <iframe id="iframeTop" name="iframeTop" frameborder="0" src="view/top.html"></iframe>
    <iframe id="iframeLeft" name="iframeLeft" frameborder="0" src="view/left.html"></iframe>
    <iframe id="iframeContent" name="iframeContent" frameborder="0" src="view/content.html"></iframe>
</div>
</body>
</html>

在left.html中怎么写链接可以显示到content.html页面呢，道理很简单，在left.html中的导航中使用target，target="iframeContent"，就是这个代码，通过iframe的id，链接可跳转至框架中的content.html中，这样就得到了一个框架布局。代码为：<a href="login.html" target="iframeContent">。