上左右的一个iframe布局

最新推荐文章于 2022-07-07 15:19:39 发布

月慕向阳

最新推荐文章于 2022-07-07 15:19:39 发布

阅读量2.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41796956/article/details/99682519

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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="left.html"></iframe>
    <iframe id="iframeContent" name="iframeContent" frameborder="0" src="view/content.html"></iframe>
</div>
</body>
</html>

left.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a target="iframeContent" href="http://www.baidu.com">百度</a>
</body>
</html>

月慕向阳

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
上左右的一个iframe布局

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...
复制链接

扫一扫