HTML5_京东首页（导航条、轮播部分）

1、导航部分

/*导航部分*/  /*210 40*/
#nav{
height:40px;
/* background-image:linear-gradient(0deg,#DE3435,#E44348); */
background:url(../images/nav_bg.jpg);
border:none;
}
#nav p{
width:210px;
height:40px;
line-height:40px;
text-indent:20px;
color:#fff;                                    /*12 8*/
background:#CD2A2B url(../images/jtr.jpg) no-repeat 188px 16px;
float:left;
font-weight:600;

}
#nav ul{
float:left;

}
#nav ul li{
float:left;
}
#nav ul li a{
font-size:16px;
color:#fff;
padding:9px 15px;
line-height:40px;
font-weight:600;
}
#nav ul li a:hover{
background:#CD2A2B;
}

2、轮播部分

/*轮播部分样式*/
#banner{
border:none;
}
#banner .banner_menu{
position:relative;
width:206px;
height:410px;
border:2px solid #CD2A2B;
border-top:none;
background:#fafafa;
}
#banner .banner_menu li{
border-bottom:2px solid #fff;
text-indent:15px;
line-height:30px;
width:191px;
position:relative;
z-index:500;
}
#banner .banner_menu li:hover{
background:#fff;
}

/*轮播隐藏部分样式*/
#banner .banner_hidden{

width:710px;
height:300px;
border:1px solid #ddd;
padding:10px 15px;
position:absolute;
top:0;
left:190px;
background:#fff;
display:none;
z-index:400;
}
#banner .banner_hidden>div.lf div{
border-top:1px solid #999;
width:480px;
line-height:30px;
}
#banner .banner_hidden>div.lf div h4{
display:inline-block;
width:100px;
text-align:right;
}
#banner .banner_hidden>div.lf div h4 a{
color:red;
}
#banner .banner_hidden>div.rt img{
margin-bottom:10px;
}
#banner .banner_hidden>div.rt li{
line-height:20px;
text-indent:0px;
}
#banner .banner_hidden>div.rt dd a{
color:red;
font-weight:600;
}

/*轮播 广告部分样式*/
#banner .banner_adv{
margin-top:10px;
margin-left:10px;
}
#banner .banner_adv .adv_top{
position:relative;
}
#banner .banner_adv .adv_top ul{
position:absolute;
right:30px;
bottom:20px;
}
#banner .banner_adv .adv_top ul li{
float:left;

}
#banner .banner_adv .adv_top ul li a{
padding:3px 8px;
background:#000;
border-radius:50%;
margin-left:10px;
color:#fff;
font-weight:600;
}
#banner .banner_adv .adv_top ul li a:hover{
background:#e4393c;
}
#banner .banner_adv .adv_bottom{
height:160px;
border:1px solid #999;
}

#banner .banner_adv .adv_bottom p{
float:left;
width:25px;
height:35px;
}
#banner .banner_adv .adv_bottom ul{
float:left;
width:618px;
}
#banner .banner_adv .adv_bottom ul li{
float:left;
width:205px;
height:150px;
padding-top:10px;
border-right:1px solid #999;
}
#banner .banner_adv .adv_bottom ul li:last-child{
border-right:none;
}
#banner .banner_adv .adv_bottom p.prov{
background:url(../images/index/ad-arraw.png) no-repeat;
margin-top:62px;
}
#banner .banner_adv .adv_bottom p.prov:hover{
background:url(../images/index/ad-arraw-hover.png) no-repeat;
}
#banner .banner_adv .adv_bottom p.next{
background:url(../images/index/ad-arraw.png) no-repeat 0px -35px;
margin-top:62px;
}
#banner .banner_adv .adv_bottom p.next:hover{
background:url(../images/index/ad-arraw-hover.png) no-repeat 0px -35px;
}