html5頁面自適應

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			body{
				background: url(images/bg.png) no-repeat;
				background-size:100% 100%;
				background-attachment: fixed;
			}
			.container{
				width: 100%;
				text-align: center;
				position: absolute;
				top: 96px;
			}
			 .container img{
				transform: scale(0.8);
				height: auto;
				width: auto\9;

			}
			#img1{
				width: 100%;
				position: absolute;
				bottom: 10px;
				margin-bottom: 40%;
				transform: scale(0.9);
				/*background: yellowgreen;*/
			}
			#img2{
				width: 100%;
				position: absolute;
				bottom: 20px;
                margin-bottom: 12%;
				transform: scale(0.9);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="images/[email protected]" alt="" />
		</div>
		<input type="image" src="images/[email protected]" id="img2"/>
		<input type="image" src="images/[email protected]" id="img1"/>
		
	</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章