移动端适配案列

最新推荐文章于 2024-10-31 15:02:05 发布

Stirve unremitting

最新推荐文章于 2024-10-31 15:02:05 发布

阅读量91

点赞数

分类专栏：笔记文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105084650

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<style type="text/css">
			/*为了让页面效果跟随浏览器窗口大小的变化而改变*/
			html{font-size:26.67vw;}/*font-size:100px;*/
			html,body{height:100%;}
			header{
				height: 0.44rem;
				background: #387ec2;
				position:fixed;
				top:0px;
				left:0px;
				width:100%;
			}
			header .logoImg{
				height: 0.3rem;
				margin:0 auto;
				padding-top:0.09rem;
			}
			header a:nth-child(1){
				display:block;
				height:0.3rem;
			}
			header .heaBtn{
				width: 0.22rem;
				position:absolute;
				right:0.27rem;
				top:0.12rem;
			}
			main{
				background: pink;
				height:100%;
				padding:0.44rem 0 0.5rem;
				box-sizing:border-box;
			}
			.banner img{
				width: 3.75rem;
			}
			nav{
				display:flex;
				height:0.32rem;
				background: #f2f2f2;
				align-items: center;/*在侧轴上居中*/
			}
			nav b{
				font-size:0.15rem;
				padding-left:0.1rem;
				padding-right:0.1rem;
				display:flex;
				align-items: center;/*在侧轴上居中*/
			}
			nav b img{
				width: 0.13rem;
				margin-right:0.05rem;
			}
			nav a{
				font-size:0.11rem;
				color:#000;
				margin-left:0.39rem;
			}
			.content{}
			
			footer{
				position:fixed;
				bottom:0px;
				left:0px;
				width: 100%;
				height:0.5rem;
				background: #e1e1e1;
			}
			/*ps中测量出来的大小减半 再除以100*/
		</style>
	</head>
	<body>
		<header>
			<a href="">
				<img class="logoImg" src="img1/logo.jpg" alt="" />
			</a>
			<a href="">
				<img class="heaBtn" src="img1/btn.jpg" alt="" />
			</a>
		</header>
		<main>
			<div class="content">
				<div class="banner">
					<img src="img1/banner.jpg" alt="" />
				</div>
				<nav>
					<b><img src="img1/btn2.jpg"/>学员必看:</b>
					<a href="">退考须知</a>
					<a href="">退考须知</a>
				</nav>
				<div class="con"></div>
			</div>
		</main>
		<footer></footer>
		未完待续！！！！！！！！！！！
	</body>
</html>