iframe框架的使用

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

iframe框架的使用

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>

相关推荐