html5页面自适应

最新推荐文章于 2024-08-14 19:32:44 发布

hai7425

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量524

点赞数

分类专栏： CSS笔记

本文链接：https://blog.csdn.net/hai7425/article/details/104673768

版权

CSS笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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/logo@2x.png" alt="" />
		</div>
		<input type="image" src="images/iOS@2x.png" id="img2"/>
		<input type="image" src="images/Android@2x.png" id="img1"/>
		
	</body>
</html>