iframe 布局

最新推荐文章于 2024-04-22 09:42:30 发布

习惯向左

最新推荐文章于 2024-04-22 09:42:30 发布

阅读量2.8k

点赞数 5

分类专栏：前端文章标签：前端 iframe 布局

本文链接：https://blog.csdn.net/xiguanxiangzuo_hello/article/details/88655061

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

iframe 简单的使用

iframe.html

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

left.html

<html>
<head>
	<title>left</title>
</head>
	<body>
		<a href="content.html" target="iframeContent">content</a>
		<br/>
		<a href="haha.html" target="iframeContent">haha</a>
	</body>
</html>

content.html

<html>
<head>
	<title>content</title>
</head>
<body>
	<h1>contentcontent</h1>
</body>
</html>

haha.html

<html>
<head>
	<title>haha</title>
</head>
<body>
	<h1>hahahhahhahha</h1>
</body>
</html>

OK,以上就可以完成一个iframe 简单的布局，效果图如下：
iframe 布局

习惯向左

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
iframe 布局

iframe 简单的使用iframe.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" ...
复制链接

扫一扫