练习头部的样式index1.css

@import url("reset.css");
/*首页通用样式开始*/
.container{
950px;
margin: 0 auto;
}

/*首页通用样式结束*/

/*统一样式*/
button{
cursor: pointer;
}

/*首页头部开始*/
.header{
height: 90px;
/*内边距*/
padding-top:30px;
/*解决尺寸变大*/
/*元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
box-sizing: border-box;
}
/*.header .container{
margin-top: 30px;
}*/

.header .logo a{
/*方一*/
/*将行内元素转化为块状*/
/*display: block;
154px;
height: 30px;
background: url(../img/logo_db.png) no-repeat;*/

154px;
height: 0px;
padding-top: 30px;
display: block;
background: url(../img/logo_db@2x.png) no-repeat left top/100%;
overflow: hidden;
}

/*方一*/
.header .logo a span{
/*将豆瓣两个字隐藏*/
/*display: none;*/
}
.header .search{
270px;
height: 30px;
border: 1px solid #c3c3c3;
margin-left: 20px;
margin-top: 20px;
position: relative;
}
.header .search .txt{
240px;
height: 20px;
padding: 5px;
font-size: 13px;
}
.header .search .txt::placeholder{
/*设置placeholder的文本颜色*/
color: #ccc;
}
.header .search button{
position: absolute;
30px;
height: 30px;
top: 0;
right: 0;
color: #C3C3C3;
}

.header .menu a{
background: url(../img/_nav_logo@2x.png) no-repeat left top/463px 20px;
float: left;
40px;
height: 20px;
margin-left: 20px;
margin-top: 27px;
}
.header .menu .menu-read{
background-position: 0 0;
}
.header .menu .menu-movie{
background-position: -60px 0;
}
.header .menu .menu-music{
background-position: -120px 0;
}
.header .menu .menu-group{
background-position: -180px 0;
}
.header .menu .menu-city{
background-position: -240px 0;
}
.header .menu .menu-fm{
background-position: -300px 0;
}
.header .menu .menu-time{
background-position: -360px 0;
}
.header .menu .menu-doupin{
background-position: -420px 0;
43px;
}