iframe框架的使用

最新推荐文章于 2024-06-25 00:17:42 发布

路过火车

最新推荐文章于 2024-06-25 00:17:42 发布

阅读量2.6w

点赞数 7

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

本文链接：https://blog.csdn.net/weixin_42362496/article/details/90207058

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在开发过程中会遇到需要引入其他页面，并在其他页面上层悬浮div

demo下载
在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		#box {
			height: 100%;
			width: 100%;
			max-width: 640px;
			background-color: aqua;
			position: fixed;
			left: 50%;
			right: 50%;
			margin-left: -320px;
			margin-right: -320px;
		}


		#paybox {
			background-color: aliceblue;
			width: 100%;
			height: 300px;
			max-width: 320px;
			position: fixed;
			left: 50%;
			right: 50%;
			margin-left: -160px;
			margin-right: -160px;
			margin-top: -160px;
			top: 50%;
		}

		#floatW {

			text-align: center;
			top: 50%;
			display: block;
			position:relative;
			transform: rotateY(-50%);
		}
	</style>
	<body>

		<!--引入框架-->

		<div id="box">
			<iframe src="iframe.html" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>
		</div>



		<!-- 悬浮窗-->

		<div id="paybox">

			<span id="floatW">
				我是充值悬浮窗
			</span>
		</div>

	</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		#gamebox{
			width:100%;
			height:100%;
			position: absolute;
			background: burlywood;
		}
		
		
	</style>
	<body>
		<div id="gamebox">
		
		</div>
	</body>
</html>

路过火车

关注

7
点赞
踩
38

收藏

觉得还不错? 一键收藏
0
评论
iframe框架的使用

在开发过程中会遇到需要引入其他页面，并在其他页面上层悬浮divindex.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> #box { he...
复制链接

扫一扫

专栏目录