HTML框架

最新推荐文章于 2023-01-06 22:53:52 发布

xflia

最新推荐文章于 2023-01-06 22:53:52 发布

阅读量211

点赞数

分类专栏： web 文章标签： html之iframe

本文链接：https://blog.csdn.net/xflia/article/details/88991828

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Iframe的使用

设置高度和宽度

高度宽度也可以用百分比表示width=“70%” height=“20%”

<iframe src="#"  width="700"  height="200"></iframe>

边框

frameborder 属性用于定义iframe表示是否显示边框。
“0”表示无边框。

<iframe src="#"  frameborder="0"></iframe>

显示目标链接页面


<iframe src="#" name="iframe_name"></iframe>
//iframe中 src="填写初始HTML等页面" name 的值用于将其他事件响应的页面显示到iframe中
<p><a href="#" target="iframe_name">点击我打开新网页</a></p>
//href="链接的目标页面" target=“打开目标链接的目标位置”

简单实例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
	margin:0px;
	padding:px;
	width:100%;
	height:100%;
}
#D_left{
	width:25%;
	height:100%;
	float:left;
	background-color:#aaddbb;
}
#D_right{
	width:75%;
	height:100%;
	float:left;
	background-color:#aaFFaa;
}

</style>
</head>
<body>
	
<div id = "D_left">
		<a href="https://www.csdn.net/nav/web" target="iframe_name">click1</a><br>
		<a href="https://home.firefoxchina.cn/" target="iframe_name">click2</a><br>
		<a href="http://www.runoob.com/html/html-iframes.html" target="iframe_name">click3</a><br>
		<a href="http://www.runoob.com/try/try.php?filename=tryhtml_iframe_target" target="iframe_name">click4</a><br><br>
	</div>
	<div id = "D_right"><iframe src="test.html" name="iframe_name" width="100%" height="900px"></iframe></div>
	//自己建一个初始页面test.html,注意路径选择，我的在同一目录下
</body>
</html>