HTML5功能结合代码例题

最新推荐文章于 2024-07-16 15:41:31 发布

啾咪儿

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量142

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_46059358/article/details/104974784

版权

HTML功能结合代码例题

设定left，和main的相对固定位置，在左侧做出超链接，在右侧ifram里边显示

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>哔哩哔哩干杯！</title>
	<style type="text/css">
		body{
					margin: 0px;
					width: 100%;
					height:100%;
				}
				#container{
					background-color: pink;
					
					
				}
				#top{
			height: 50px;
			background-color: lightskyblue;
			}
			#left{
						width:80px;
						position: absolute;/* 相对位置 */
						bottom:0px;/* 底部 */
						left:0px;
						top:52px;
						float:left;
						background-color: darkcyan;
						}
#main{
			background-color:black;
			position:absolute;/* 相对位置 */
			float: right;
			bottom:0px;/* 底部 */
			right:0px;
			top:52px;
			left:80px;
		}
#mainFrame{
			width: 100%;
			height: 100%;
		}
	</style>
	</head>
	<body>
		<div id="container">
		<div id="top"></div>
		<div id="left"><a href="http://bilibili.com" target="mainFrame">哔哩哔哩干杯！</a></div>
		<div id="main"><iframe id="mainFrame" name="mainFrame"></iframe></div>
		</div>
	</body>
</html>

啾咪儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5功能结合代码例题

HTML功能结合代码例题设定left，和main的相对固定位置，在左侧做出超链接，在右侧ifram里边显示源代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>哔哩哔哩干杯！</title> <style type="text...
复制链接

扫一扫