BinaryDevelop
  1. ホーム
  2. HTML

iframeフレームワークの使用

2022-02-07 05:20:06
<パス

開発中に、他のページを取り込んだり、他のページの上に div をホバーさせたりする必要が出てきます。

デモのダウンロード

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>

		<! --Introduce frame-->

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



		<! -- hover window-->

		<div id="paybox">

			<span id="floatW">
				I am recharge hover window
			</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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します