iframe标签框架

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

谁家菜鸟初养成

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

阅读量703

点赞数 1

分类专栏： HTML 文章标签： iframe标签

本文链接：https://blog.csdn.net/qq_36499016/article/details/96481726

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<iframe name="frame1" src="http://www.baidu.com" frameborder="0" width="100%" height="100%"></iframe>
<!--
    src="规定在iframe中显示的文档的url"
    width="区域宽度"
    height="区域高度"
    frameborder="1/0" 1代表有边框，0表示无边框
    scrolling="yes/no/auto" （有，无，自动）
-->
<a href="" target="iframe中的name属性值"></a>
<!--  在iframe中打开超链接  -->

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自适应&指定位置打开链接</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style type="text/css">
			html,body.box{height:100%;}
			.head{width:100%; height: 80px; background: deepskyblue;}
			.main{width:100%;height: auto;position: absolute;top:80px;bottom:0;background: #eee;}
			.left{width:200px;height:100%;background: #ff0;float:left;margin-right: 10px;}
			.right{height:100%;width:auto;background: #333;overflow: hidden;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="head"></div>
			<div class="main">
				<div class="left">
					<ul>
						<li><a href="http://www.baidu.com" target="frame1">百度</a></li><!--target必备属性-->
						<li><a href="https://www.jd.com" target="frame1">京东</a></li>
						<li><a href="https://www.mogu.com/" target="frame1">蘑菇街</a></li>
					</ul>
				</div>
				<div class="right">
					<iframe name="frame1" src="" frameborder="0" width="100%" height="100%"></iframe><!--name是必备属性-->
				</div>
			</div>
		</div>
	</body>
</html>