html手机端自适应头部,html5写自适应头部

仿写的一个聚划算的例子

*{

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;

}

聚划算

• 今日
• 品牌
• 生活