HTML5之框架标签

最新推荐文章于 2024-07-19 23:42:48 发布

Programmer.杨

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量1.2k

点赞数 2

分类专栏：前端技术-HTML 文章标签： iframe a 框架标签学习

本文链接：https://blog.csdn.net/YWB88888888/article/details/102626906

版权

前端技术-HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>HTML框架标签学习</title>

	<style type="text/css">
		iframe {
			border: 1px solid gray;
			float: left;
			width: 1200px;
			height: 700px;
			margin-left: -1px;
		}
		nav {
			border: 1px solid gray;
			float: left;
			width: 220px;
			height: 640px;
			padding: 30px;
		}
		dd {
			border-bottom: 1px solid gray;
			margin: 35px 0 35px 0;
		}
		a {
			text-decoration: none;
		}
	</style>
</head>
<body>
	<nav>
		<dl>
			<dd><a href="https://sale.vmall.com/hwmate2.html?cid=99806" target="myIframe">HUAWEI手机</a></dd>
			<dd><a href="https://www.apple.com/cn/" target="myIframe">APPLE手机</a></dd>
			<dd><a href="https://www.samsungeshop.com.cn/" target="myIframe">SAMSUNG手机</a></dd>
			<dd><a href="https://www.oppo.com" target="myIframe">OPPO手机</a></dd>
			<dd><a href="https://www.vivo.com.cn/" target="myIframe">VIVO手机</a></dd>
			<dd><a href="https://www.mi.com/" target="myIframe">XIAOMI手机</a></dd>
			<dd><a href="https://www.meizu.com/" target="myIframe">MEIZU手机</a></dd>
			<dd><a href="https://www.smartisan.com/" target="myIframe">锤子手机</a></dd>
			<dd><a href="https://www.oneplus.com/cn" target="myIframe">一加手机</a></dd>
		</dl>
	</nav>
	
	<iframe name="myIframe" src="https://www.17sucai.com/pins/demo-show?id=28627"></iframe>
</body>
</html>