html ifram应用

最新推荐文章于 2025-06-08 00:03:24 发布

奔跑的小男孩

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_22616665/article/details/77404550

HTML 专栏收录该内容

1 篇文章

订阅专栏

iframe上左右布局
文件结构分为四个，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">。

<li><a href="menu/caidan1/listClasses.html" target="iframeContent"><span class="fa fa-caret-right"></span>显示表格</a></li>