html5写自适应头部

比眉伴天荒 2022-08-07 08:42 119阅读 0赞

仿写的一个聚划算的例子

![Center][]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	
    	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport">
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		header{
    			width: 100%;
    			height: 45px;
    			background-color: rgba(242,24,97,.95);
    			display: -webkit-box;
    		}
    		header .logo{
    			width: 110px;
    			height: 45px;
    			background-color: orange;
    			position: relative;
    		}
    		header .logo h1{
    			width: 65px;
    			height: 20px;
    			background: url(images/logo.png);
    			/*margin: 0 auto;*/
    			left: 50%;
    			top: 50%;
    			position: absolute;
    			/*css3中的变形*/
    			-webkit-transform:translate(-50%,-50%);
    			/*SEO的考量,类似于缩进*/
    			text-indent: -9999px;
    			/*里面的自适应*/
    			-webkit-background-size: cover;
    			background-size: cover;
    		}
    		header nav{
    			-webkit-box-flex:1;
    		}
    		header nav ul{
    			/*一条上*/
    			display: -webkit-box;
    			/*去掉li前的原点*/
    			list-style: none;
    		}
    		header nav ul li{
    			/*一条线上成比例*/
    			-webkit-box-flex:1;
    			/*行间距可以将文字顶居中*/
    			line-height: 45px;
    			text-align: center;
    		}
    		header nav ul li a{
    			/*去掉a下的横线*/
    			text-decoration: none;
    			color: white;
    		}
    		header .but{
    			width: 110px;
    			height: 45px;
    			background-color: orange;
    		}
    	</style>
    </head>
    <body>
    	<header>
    		<div class="logo">
    			<h1>聚划算</h1>
    		</div>
    		<nav>
    			<ul>
    				<li><a href="#">今日</a></li>
    				<li><a href="#">品牌</a></li>
    				<li><a href="#">生活</a></li>
    			</ul>
    		</nav>
    		<div class="but"></div>
    	</header>
    </body>
    </html>

[Center]: /images/20220805/41510c7519da42f0b8a20b92a644225f.png