QQ彩贝头部部分完整代码//图片暂不提供




   
    Document
   
   




   

        赚彩贝
        花彩贝
   

   






   

       

           

       


   



   


CSS

*{
    margin: 0;
    padding: 0;
}
body, html {
    height:100%;
    font:12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
}
ul{
    list-style: none;
}
.wrap{
    width: 1100px;
    margin: 0 auto;
}
img{
    border:0 none;
    vertical-align: bottom;
}
a{
    text-decoration: none;
}
.left{
    float: left;
}
.right{
    float: right;
}
.fix{
    overflow: hidden;
    clear: both;
}
.clearfix:after{
    content: "";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}
/*头部*/
.top{
    height: 36px;
    line-height: 36px;
    background: #545652;
}
.top a{
    color: #ddd;
    margin: 0 15px;
}
.top a:hover{
    color: #e64e3e;
}
/*logo*/
.logo{
    width: 170px;
    height: 46px;
    background: url(../img/logo_170x46.png) no-repeat;
    margin-top: 18px;
}
.logo span{
    line-height: 999;
    display: inline-block;
    overflow: hidden;
    height: 0;
}
/*导航*/
.menu, .menu-main, .menu-tag, .menu-con a {
    background:url(../img/header.png) no-repeat;
}
.menu{
    background-repeat: repeat-x;
    height: 84px;
}
.nav-menu{
    padding-left: 50px;
}
.menu-main{
    position: relative;
    padding-left: 38px;
    height: 84px;
    margin-left: -8px;
    background-position: 0 -85px;
}
.menu-tag{
    position: absolute;
    display: block;
    width: 41px;
    height: 25px;
    left: 26px;
    top: 0;
    line-height: 999;
    overflow: hidden;
}
.menu-tagz{
    background-position:0 -676px;
}
.menu-main:hover .menu-tagz{
    background-position:-40px -676px;

}
.menu-main:hover .menu-tagh{
    background-position:-149px -676px;

}
.menu-main:hover  .menu-tag{
    animation: move1 .3s linear both;
}
@keyframes move1 {
    0%{
        width: 0px;
    }
    33%{
        width: 23px;
    }
    66%{
        width: 46px;
    }
    100%{
        width: 69px;
    }
}
.menu-tagh {
    background-position:-109px -676px;
}
.menu-con {
    height:84px;
}
.menu-con li {
    float:left;
}
.menu-con li a {
    display:block;
    width:108px;
    height:84px;
    line-height:999;
    overflow:hidden;
}
.menu-con .item-mall {
    background-position:0 -170px;
}
.menu-con .item-mall:hover {
    background-position:-108px -170px;
}
.menu-con .item_travel {
    background-position:0 -254px;
}
.menu-con .item_travel:hover {
    background-position:-108px -254px;
}
.menu-con .item_gmall {
    background-position:0 -338px;
}
.menu-con .item_gmall:hover {
    background-position:-108px -338px;
}
.menu-con .item_about {
    background-position:0 -506px;
}
.menu-con .item_about:hover {
    background-position:-108px -506px;
}
.menu-con .item_act {
    background-position:0 -422px;
}
.menu-con .item_act:hover {
    background-position:-108px -422px;
}
.menu-con .item_i {
    background-position:0 -590px;
}
.menu-con .item_i:hover {
    background-position:-108px -590px;
}
/*导航右侧*/
.menu-r a{
    background: url("../img/iconsB.png") no-repeat;
    width: 24px;
    height: 24px;
    line-height: 999;
    overflow: hidden;
    margin-left: 14px;
    float: left;
    margin-top: 32px;
    transition: all 0.5s ease;
}
.menu-r .icon-bbs {
    background-position:0 -21px;
}
.menu-r .icon-bbs:hover {
    background-position:0 -46px;
}
.menu-r .icon-wb {
    background-position:-24px -21px;
}
.menu-r .icon-wb:hover {
    background-position:-24px -46px;
}
.menu-r .icon-mail {
    background-position:-49px -21px;
}
.menu-r .icon-mail:hover {
    background-position:-49px -46px;
}

你可能感兴趣的:(QQ彩贝头部部分完整代码//图片暂不提供)