a标签结合Iframe与target实现本页内部某区域的更新

最新推荐文章于 2021-06-07 11:33:25 发布

淅雨听风

最新推荐文章于 2021-06-07 11:33:25 发布

阅读量378

点赞数 1

分类专栏： HTML 文章标签： a标签 iframe标签 target属性

本文链接：https://blog.csdn.net/u011234448/article/details/100592544

版权

//Index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<style>
		*{
			padding: 0 ;
			margin: 0 ;
			font-size: 16px;
		}
		a{
			text-decoration: none; 
			color: #000;
		}
		a:hover{
			color: blue; 
		}
		li{
			list-style: none;
		}
		
		.top{
			width: 100%;
			height: 80px;
			line-height: 40px;
			margin-left: 4px;
		}
		.middle{
			width: 100%;
			height: 80%;
			margin-left: 4px;
		}
		.middle h3{
			line-height: 40px;
		}
		.bottom{
			width: 100%;
			height: 10%;
			line-height: 40px;
		}
		
		.w{
			width: 1200px;
			margin: 0 auto;
		}
		.index{
			width: 1200px;
			height: 1100px;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.left{
			height:1000px;
			width:200px;
		}
		.right{
			width: 990px;
			height: 1000px;
			border: 2px solid blue;
			box-shadow: -2px -2px 24px 1px;
			background: #ecf3fb;
		}
		.right p{
			font-size: 36px;
			margin-left:80px;
			margin-top: 100px;
		}
	</style>
</head>
<body>
<div class="index w">
	<div>
		<iframe src="../Iframe/left.html" height="1000" width="200" scrolling="no" class="fl">
		</iframe>
		<div class="right fr" name="content" >
			**<iframe name="mainFrame1" style="width: 100%; height: 100%;" >
			</iframe>**
		</div>
	</div>
</div>	
</body>
</html>

//left.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>left</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			font-size: 16px;
		}
		a{
			text-decoration: none; 
			color: #000;
		}
		a:hover{
			color: blue; 
		}
		.left{
			background: #4f9fdc;
			heigh

最低0.47元/天解锁文章

淅雨听风

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
a标签结合Iframe与target实现本页内部某区域的更新

//Index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <style> *{ padding: 0 ; margin: 0 ; font-size: 16p...
复制链接

扫一扫