css.css

*{
    margin:0px;
    padding:0px;

}

body{

    font: 12px/1.62 Helvetica,Arial,sans-serif;
}
a{
    text-decoration: none;
}

img,input{
    border:none;
    border: 1px solid;
}


a{
    color:#508AB6;
}

li{
    list-style: none;
}

a:hover{
    background:#508AB6;
    color:#fff;
}


h2.title{

    /*利用width降上面浮动的元素造成的混乱的li元素 挤下去！！！！！*/
    width:230px;
    font:15px/150% Arial,Helvetica,sans-serif;
    color:#007722;
    border:1px solid #f00;
}

.right{
    width:266px;
    height:20px;
    position:absolute;
    right:0px;
    top:0px;
    border:1px solid #508AB6;
}

.hd-ad{
    width:950px;
    height:90px;
    margin:0 auto;

}
.left{
    width:121px;
    position:absolute;
    left:0px;
    top:0px;
    border:1px solid blue;
}













#hd-header{
    width:950px;
    height:90px;
    margin:0 auto;
    border:1px solid red;
    position: relative;

}

#hd-header .header-logo{
    display: block;
    width:154px;
    height: 30px;
    background:url("./image/logo_db.png") no-repeat;
    position: absolute;
    left: 0px;
    top: 29px;
}
#hd-header .header-search{
    width: 303px;
    height: 30px;
    border: 1px solid #c3c3c3;
    position:absolute;
    left: 183px;
    top: 31px;
    color: #e4e4e4;
    padding-left: 7px;
    
}
#hd-header p{
    width:13px;
    height:13px;
    background:url("./image/bn_srh_1.png") no-repeat;
    position:absolute;
    left:468px;
    top:40px;
}
#hd-header ul{
    width: 402px;
    height:23px;
    position:absolute;
    right: 0px;
    top: 36px;
    border: 1px solid blue;

}
#hd-header ul li{
    margin-right: 10px;
float: left;
}
#hd-header ul li a{
    display: block;
    width:45px;
    height:23px;
    /*border: 1px solid yellow;*/
}
#hd-header ul li a.header-book{
    background:url("./image/anony_nav_logo.png") 0px 0px no-repeat;

}
#hd-header ul li a.header-movie{
    background:url("./image/anony_nav_logo.png") -59px 0px no-repeat;

}
#hd-header ul li a.header-music{
    background:url("./image/anony_nav_logo.png") -115px 0px no-repeat;

}
#hd-header ul li a.header-group{
    background:url("./image/anony_nav_logo.png") -179px 0px no-repeat;

}
#hd-header ul li a.header-fm{
    background:url("./image/anony_nav_logo.png") -240px 0px no-repeat;

}
#hd-header ul li a.header-local{
    background:url("./image/anony_nav_logo.png") -299px 0px no-repeat;

}
#hd-header ul li a.header-dx{
    background:url("./image/anony_nav_logo.png") -357px 0px no-repeat;

}


#hd-reg-background{
    background: #e8edf1;
    height:88px;
    width:100%;

}

#hd-reg{
    width:950px;
    height:88px;
    margin:0 auto;
    border:1px solid red;
    position: relative;
}

#hd-reg .reg-join{

    display: block;
    width:120px;
    height:37px;
    background: #ef7360;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    line-height: 37px;
    text-align: center;
    position:absolute;
    top:20px;
}
#hd-reg .reg-join:hover{

    background:#ED6752;

}
#hd-reg .reg-join span{
    font-size: 12px;
    margin-left: 3px;
}

#hd-reg p{
    position: absolute;
    left: 138px;
    top: 30px;
    font-size: 16px;
    color: #666666;
}



#hd-reg input{
    position:absolute;
    width:158px;
    height:32px;
    top: 20px;
}
#hd-reg .reg-username{
         right:250px;
}

#hd-reg .reg-password{
            right:88px;
}

#hd-reg .reg-login{
    display: block;
    width: 80px;
    height:33px;
    background:#3ba354;
    position:absolute;
    right:4px;
    top: 20px;
    border-radius:4px;
    font-size: 13px;
    color:#fff;
    text-align: center;
    line-height: 33px;
}
#hd-reg .reg-login:hover{
    background:#1C9439;
}
#hd-reg p.reg-p{
    position:absolute;
    left: 544px;
    top: 62px;
    width:85px;
    height:17px;
    border:1px solid blue;
    padding-left: 20px;
    line-height: 17px;

}
#hd-reg p.reg-p .reg-rember{

    position:absolute;
    left: 0px;
    top: 2px;
    display: block;
    width:13px;
    height:13px;
    float: left;


}




#hd-reg .reg-forget{
    position: absolute;
    left: 704px;
    top: 61px;

}


#hd-con{

    width:950px;
    height:546px;
    margin:35px auto 0 ;
    border:1px solid #f00;
    position:relative;

}

#hd-con .con-left{
    width:373px;
    height:546px;
    position:absolute;
    left:0px;
    top:0px;
    border:1px solid #ED6752;

}

#hd-con .con-mid{
    width:298px;
    height:546px;
    position:absolute;
    left:380px;
    top:0px;
    border:1px solid #ff0000;

}

.con-right{
    width:266px;
    height:546px;
    position:absolute;
    right:0px;
    top:0px;
    border:1px solid #508AB6;
}


#hd-con .con-left ul{

    margin-top:15px;
    border:1px solid #f00;
}

#hd-con .con-left ul li{

    width:171px;
    height:219px;
    margin-left:10px;
    float:left;
}
#hd-con .con-left ul li span{
    color:#999999;
}






#hd-con .con-mid ul{
    margin-top: 37px;
    border:1px solid #f00;
}

#hd-con .con-mid ul li{
    line-height:30px;
    border:1px solid green;
}
#hd-con .con-mid ul h2{
    font-weight: 400;
    color:#999;
    font-size:12px;
}

#hd-con .con-mid ul p{
    color: #666666;
}


#hd-con .con-right ul{
    margin-top: 15px;

}

#hd-con .con-right ul li{
    border:1px solid #508AB6;

    margin-bottom:13px;
}
#hd-con .con-right p{
    color: #999999;
}
#hd-con .con-right b{
    display:block;
    color: #999;
    font-weight: 400;
}
#hd-con .con-right .last-ad{
    width:258px;
    height:118px;
    border:1px solid #eeeeee;
    position:absolute;
}

#hd-con .con-right .last-ad h2{
    color:#000;
    font-size:15px;
    position:absolute;
    left:19px;
    top:15px;
}
#hd-con .con-right .last-ad a.last-ad-pic{
    position:absolute;
    left:19px;
    top:44px;
}

#hd-con .con-right .last-ad a.last-ad-ghost{
    width:68px;
    height:28px;
    overflow:hidden;
    position:absolute;
    left:87px;
    top:11px;
}

#hd-con .con-right .last-ad a.last-ad-ghost:hover{

    background:#fff;

}

#hd-con .con-right .last-ad a.last-ad-rainbow{
    position:absolute;
    top:0px;
    right:0px;

}
#hd-con .con-right .last-ad a.last-ad-beghost{

    position:absolute;
    left:128px;
    top:46px;

}
#hd-con .con-right .last-ad p{

    color: #999999;
    position:absolute;
    left: 128px;
    top: 66px;
}

#hd-con .con-right .last-ad span{
    color: #999999;
    position: absolute;
    left:128px;
    top:80px;

}


#hd-movie-background {
    height: 631px;
    background: #f7f7f7;
    margin-top: 40px;
    border: 1px solid #508AB6;
    padding-bottom: 40px;
    padding-top:40px;
}

#hd-movie-background #hd-movie{
    width:950px;
    height:631px;
    border:1px solid #f00;
    margin: 0px auto;
    position:relative;
}

.left .left-title{
    font-size:24px;

}

.left .left-up{
    margin-top:5px;
}

.left .left-up li{
    font-size:14px;
    line-height:24px;
}

.left .left-down{
    margin-top:28px;
    border:1px solid yellow;

}

.left .left-down li{
    width:55px;
    height:93px;
    border:1px solid red;
}

.left .left-down li a.left-down-pic{
    /*background:url(./image/app_icons_50_6.jpg) -350px 0 no-repeat ;*/
    width:50px;
    height:50px;
    display:block;
    border-radius: 5px;
    box-shadow:3px 3px 3px #999;
}
/*注意这里是内联元素要加block要不然属性不起作用,要不然就用行高*/
.left .left-down li a.left-down-des{
    display:block;
    margin-top: 5px;
    text-align: center;
    /*line-height: 25px;*/
}


.mid{
    width:530px;
    height:500px;
    border:1px solid yellow;
    position:absolute;
    left:121px;
    top: 0px;

}

.mid ul li{

    width:127px;
    border:1px solid blue;
    text-align:center;
    float: left;


}
#hd-movie-background #hd-movie ul.hd-movie-list{
    margin-top: 16px;
}
#hd-movie-background #hd-movie ul.hd-movie-list li{
    margin-bottom: 40px;

}
/*.mid ul li img{*/
    /*padding-left:10px;*/
    /*padding-top:10px;*/
/*}*/
#hd-movie-background #hd-movie .left-down-pic{

    background:url(./image/app_icons_50_6.jpg) -350px 0 no-repeat ;
}
#hd-movie-background #hd-movie .hd-movie-name{

    /*display:block;*/
    text-align: center;
}

#hd-movie-background #hd-movie span.hd-movie-point{
    display:block;
    width:82px;
    height:11px;
    text-align: center;
    border:1px solid #f00;
    background:url(./image/midstars.gif) 10px 0 no-repeat;
    overflow:hidden;
    padding-left: 45px;
    line-height: 16px;

}

#hd-movie-background #hd-movie .hd-movie-choose{
      display:block;
      height:23px;
      width:68px;
      background:#1c8bd0;
      color:#fff;
      line-height: 23px;
      border-radius:5px;
      margin:3px auto;
    text-align: center;
}

#hd-movie-background #hd-movie .movie-right-ul{

    margin-top:15px;
    border:1px solid yellow;
    float: left;
}

#hd-movie-background #hd-movie .movie-right-ul li{
        width:45px;
        float:left;
    line-height:23px;
    border:1px solid darkslategray;
}

#hd-movie-background #hd-movie .movie-title{
     margin-top: 20px;
     float:left;
}
#hd-movie-background #hd-movie ul.movie-right-down{
    float:left;
    border:1px solid #000000;
}

#hd-movie-background #hd-movie .movie-right-down li{
    border-bottom:1px solid #eaeaea;
    height:30px;
    line-height:30px;
    width:260px;
}
#hd-movie-background #hd-movie .movie-right-down li a{
    margin-left:12px;
}


#hd-book{
    width:950px;
    height:623px;
    border:1px solid #f00;
    margin:38px auto;
    position:relative;
}

#hd-book .book-new{

    position:relative;
    border:1px solid yellow;
}

#hd-book .book-new img{

    position:absolute;
    top:2px;
}
#hd-book .book-read{


    background:url(./image/app_icons_50_6.jpg) 0px 0 no-repeat ;

}
#hd-book .book-write{


    background:url(./image/app_icons_50_6.jpg) -399px 0 no-repeat ;

}
#hd-book .book-buy{


    background:url(./image/app_icons_50_6.jpg) -200px 0 no-repeat ;

}
#hd-book ul{
    margin-top:10px;
}

/*#hd-book .mid p{*/
    /*margin-top:5px;*/
/*}*/

#hd-book .book-free-read{
    display:block;
    width:68px;
    height:23px;
    background: #999a95;
    text-align: center;
    line-height:23px;
    color: #ffffff;
    margin: 0 auto;

}

#hd-book ul .book-free-read:hover{
    background:#878882;
}

#hd-book .book-num{


    /*border:1px solid blue;*/
    line-height:23px;
    margin-top: 32px;
    float:left;
    width:400px;
}
#hd-book .book-num-ul{
    clear:left;
    float:left;

}
#hd-book .book-num-ul li a.book-num-pic{
    display:block;
    width:100px;
    height:148px;
    margin-left:10px;
}
#hd-book .book-num-ul a img{
    width:100%;
    height:100%;
}
#hd-book .book-num-ul b{
    font-size:12px;
    color:#666;
    font-weight:400;
}

#hd-book h2.title{
    width:246px;
}
#hd-book .right ul li{
    height:60px;
     padding-top:13px;
    border-bottom:1px solid #878882;
}
#hd-book .right ul li span{
    margin-right:11px;
    float:left;
}
#hd-book .right ul li a{
    float:left;
    margin-right: 11px;
    margin-bottom:5px;
}

#hd-music-background{

    height:504px;

    background: #f7f7f7;;
}


#hd-music-background #hd-music{
    width:950px;
    height:464px;
    margin:0 auto;
    border:1px solid #f00;
    position:relative;
}

#hd-music-background #hd-music .music-fm{
    background:url(./image/app_icons_50_6.jpg) -250px 0 no-repeat;
}

#hd-music-background #hd-music .music-people{
    background:url(./image/app_icons_50_6.jpg) -50px 0 no-repeat;
}

#hd-music-background #hd-music .music-title{
    color:#f38c6a;
}
#hd-music-background #hd-music .music-title:hover{
    color:floralwhite;
}

#hd-music-background #hd-music .mid ul li{
    margin-top: 10px;
    margin-bottom:20px;

}
#hd-music-background #hd-music .mid ul b{
    display:block;
    width:67px;
    height:11px;
    border:1px solid #f00;
    background:url(./image/midstars.gif) 20px 0 no-repeat;
    padding-left:60px;
    color:#fd4400;
    line-height: 13px;
}




#hd-music-background #hd-music .music-right-ul{
    margin-top:10px;
}

#hd-music-background #hd-music .music-right-ul li{
    width:266px;
    height:82px;
    position:relative;
    border:1px solid blue;
}
#hd-music-background #hd-music .music-right-ul li img{
         width:48px;
         height:60px;
         position:absolute;
    border:1px solid red;
    left:19px;
    top: 0px;
}

#hd-music-background #hd-music .music-right-ul li em{
      position:absolute;
    left:0px;
    top:4px;
    font-style: normal;

}


#hd-music-background #hd-music .music-right-ul li .music-right-name{

    position:absolute;
    left:77px;
    top:3px;
}


#hd-music-background #hd-music .music-right-ul li p{

    position:absolute;
    left:77px;
    top:25px;

}


#hd-music-background #hd-music .music-right-ul li b{
    font-weight: 400;
    position:absolute;
    left:77px;
    top:47px;

}


#hd-group{

    width:950px;
    height:650px;
    border:1px solid #000000;
    margin:0 auto;
    position:relative;

}

#hd-group .group-lit{

    background:url(./image/app_icons_50_6.jpg) -500px 0 no-repeat;
}

/*#hd-group .left{*/

    /**/
/*}*/


#hd-group .group-mid-ul li{

    width:260px;
    height:89px;
    border:1px solid purple;
    position:relative;
    margin-top:10px;
}

#hd-group .group-mid-ul li a.group-pic{

    position:absolute;
    top: 0;
    left: 0;
}
#hd-group .group-mid-ul li a.group-title{
    position:absolute;
    left: 64px;
    top: 0;
}
#hd-group .group-mid-ul li span{
    position:absolute;
    left:64px;
    top:29px;
    color:#999999;
}

#hd-group .group-right-ul{
    /*float:left;*/


}
#hd-group .group-right-ul li{
    width: 267px;
    height: 63px;
    border:1px solid #f00;
    margin-top:16px;

}

#hd-group .group-right-ul li a.right-ul-first{

    font-size:14px;
    color:#333333;

}
#hd-group .group-right-ul li a.right-ul-first:hover{
    color:#fff;
}
#hd-group .group-right-ul li p a{
    float:left;
    margin-right:12px;
}

#hd-local-background{
    background:#f7f7f7;
    height:385px;

}

#hd-local-background #hd-local{
    width:950px;
    height:385px;
    margin:0 auto;
    border:1px solid red;
    position:relative;
}

#hd-local-background #hd-local a{

  color:#ee6a03;

}
#hd-local-background #hd-local .local-a{
    background:url(./image/app_icons_50_6.jpg) -100px 0 no-repeat;

}

#hd-local-background #hd-local .local-mid-ul li{

    width:250px;
    height:141px;
    border:1px solid #000000;


}

#hd-local-background #hd-local .local-mid-ul li .local-mid-pic{


    float:left;
}

#hd-local-background #hd-local .local-mid-ul li .local-mid-title{
    margin-left:-13px;

}
#hd-local-background #hd-local .local-mid-ul li .local-mid-title span{
   background:#ff8263;
    text-align: center;
    color:#fff;
    padding-left:3px;
    padding-right:3px;
    font-size:11px;
 }

#hd-local-background #hd-local .local-mid-ul li p{


    color:#666666;
    text-align: left;
}
#hd-local-background #hd-local .local-mid-ul li span{


    color:#666666;
    text-align: left;
}

#hd-local-background #hd-local .local-mid-ul li div{
    float:right;
    border:1px solid #f00;
    width:160px;

}


#hd-local-background  #hd-local .right  .music-title{
    /*float:left;*/
}
#hd-local-background #hd-local .right .group-right-ul li{
    width: 267px;
    height: 63px;
    border:1px solid #f00;

    margin-top:16px;
}

#hd-local-background #hd-local .right  li a.right-ul-first{


    font-size:14px;
    color:#333333;
    border:1px solid red;
}

#hd-local-background #hd-local .right  li a.right-ul-first:hover{

    color:#fff;
}
#hd-local-background #hd-local .right .group-right-ul li p a{
   float:left;
    margin-right:12px;

}

#hd-foot{


    width:950px;
    height:105px;
    border-top:1px dashed red;
    margin:35px auto 0;
    padding-top: 17px;

}

#hd-foot .foot-left{

    width: 460px;
    color:#999999;
    float:left;
}

#hd-foot .foot-right{
    float:right;
    width: 460px;
}
#hd-foot .foot-right a{
    margin-left:10px;
}