<header class="header">

<!--top区域-->

<div class="top">

<div class="center-wrap clearfix">

<span>服务热线：400-8888-888</span>

</div>

</div>

<!--header导航区域-->

<div class="nav">

<div class="center-wrap clearfix">

<h1>慕家居</h1>

<ul>

<li>

<a href="">

<div class="bg-color">

<img src="img/home-gry.png" />

<img src="img/home-white.png" class="white"/>

</div>

</a>

<p>网站首页</p>

</li>

<li>

<a href="">

<div class="bg-color">

<img src="img/abouts-gry.png" />

<img src="img/abouts-white.png"  class="white"/>

</div>

</a>

<p>关于我们</p>

</li>

<li>

<a href="">

<div class="bg-color">

<img src="img/kefu-gry.png" />

<img src="img/kefu-white.png"  class="white"/>

</div>

</a>

<p>服务建设</p>

</li>

<li>

<a href="">

<div class="bg-color">

<img src="img/chanpin-gry.png" />

<img src="img/chanpin-white.png"  class="white"/>

</div>

</a>

<p>产品中心</p>

</li>

<li>

<a href="">

<div class="bg-color">

<img src="img/fuwu-gry.png" />

<img src="img/fuwu-white.png"  class="white"/>

</div>

</a>

<p>服务大厅</p>

</li>

</ul>

</a>

<div class="search">

<form>

<input type="text" name="search-text" placeholder="请输入搜索内容" />

<input type="button" name="search" />

</form>

<img src="img/search.png" />

</div>

</div>

</div>

</header>

​

css

/*top区*/

.header .top{

width: 100%;

height: 40px;

background-color: #0058AA;

}

.header .top span{

float: right;

font-size: 18px;

color: #FFFFFF;

line-height: 40px;

}

/*header导航区*/

.header .nav{

width: 100%;

height: 121px;

}

.header .nav h1{

float: left;

font-size: 64px;

color: #0058AA;

line-height: 91px;

margin-top: 19px;

margin-right: 109.1px;

cursor: pointer;

}

.header .nav ul{

float: left;

}

.header .nav ul li{

float: left;

width: 64px;

height: 91px;

margin-top: 19px;

margin-right: 60.9px;

position: relative;

}

.header .nav ul li:nth-last-child{

margin-right: 62px;

}

.header .nav ul li .bg-color{

width: 50px;

height: 50px;

background-color: #FFFFFF;

margin-left: 7px;

border-radius: 50%;

transition: all 1s linear 0s; 

}

.header .nav ul li img{

width: 33px;

height: 33px;

position: absolute;

top: 8px;

left: 15.5px;

}

.header .nav ul li img.white{

display: none;

}

.header .nav ul li .bg-color:hover{

background-color: #0058AA;

animation: nav 1s linear 0s alternate infinite;

}

.header .nav ul li .bg-color:hover img.white{

display: block;

}

@keyframes nav{

from{

transform: scale(1);

}

to{

transform: scale(1.2);

}

}

.header .nav ul li .bg-color:hover img:nth-child(1){

display: none;

}

.header .nav ul li p{

font-size: 16px;

color: #545454;

position: absolute;

bottom: 0;

left: 0;

}

.header .nav .search{

position: relative;

display: inline-block;

}

.header .nav .search form input:nth-child(1){

width: 213px;

height: 37px;

border: 1px solid #D3D3D3;

border-right: none;

margin-top: 51px;

font-size: 14px;

  color: #545454;

  padding-left: 15px;

  outline: none;

}

.header .nav .search form input:nth-child(2){

width: 48px;

height: 39px;

background-color: #0058AA;

border: 1px solid #D3D3D3;

border-left: none;

position: absolute;

top: 51px;

right: 0;

outline: none;

cursor: pointer;

}

.header .nav .search img{

width: 33px;

height: 33px;

position: absolute;

top: 55px;

right: 6px;

cursor: pointer;

}