HTML5_京东首页样式

通用样式：

去掉边框，里面的东西不会乱

页头：

   /*头部样式*/
#header{
    background:#f7f7f7;
}
#header>.header_inner{
    height:32px;
}
#header>.header_inner>.lf{
    line-height:32px;
}
#header>.header_inner>.lf>img{
    position:relative;
    top:-10px;

    transition:all 1s linear;
}
#header>.header_inner>.lf>img:hover{
    transform:rotate(720deg);
}

#header>.header_inner>.rt>ul>li{
    float:left;
    line-height:32px;
}
#header>.header_inner>.rt>ul>li b{
    border-left:1px solid #999;
    margin:5px;
}
#header>.header_inner>.rt>ul>:nth-child(5) i{    /*会员俱乐部*/
    padding:0 12px;
    background:url(../images/vip.jpg) no-repeat 0px 5px;
}
#header>.header_inner>.rt>ul>:nth-child(7) i{    /*企业频道*/
    padding:0 11px;
    background:url(../images/dakehu.jpg) no-repeat 0px 5px;
}
#header>.header_inner>.rt>ul>:nth-child(9) i{        /*手机京东*/
    padding:4px 7px;                        /*W128  H360*/
    background:url(../images/iconlist_2.png) no-repeat -128px -357px;
}
#header>.header_inner>.rt>ul>:nth-child(9):hover i{    /*鼠标移入手机京东*/

    background:url(../images/iconlist_2.png) no-repeat -128px -396px;
}
#header>.header_inner>.rt>ul>:nth-child(11){    /*客户服务*/
    position:relative;
    width:80px;
    text-align:center;
}
#header>.header_inner>.rt>ul>:nth-child(11):hover i{
    padding:0px 4px;
    background:url(../images/jt_down.jpg) no-repeat 0px 8px;
}
#header>.header_inner>.rt>ul>:nth-child(11) i{
    padding:0px 4px;
    background:url(../images/jt_up.jpg) no-repeat 0px 8px;
}
#header>.header_inner>.rt>ul>:nth-child(11) ul{
    position:absolute;
    top:30px;
    left:0px;
    background:#fff;
    border:1px solid #999;
    display:none;
    z-index:9999;
}
#header>.header_inner>.rt>ul>:nth-child(11):hover ul{
    display:block;
}
#header>.header_inner>.rt>ul>:nth-child(11) ul li{
    width:80px;
}

/*头部盒子搜索样式*/
#header_box:before{
    content:"";
    display:table;
}
#header_box>.header_logo{
    margin-top:8px;
    margin-bottom:8px;
    margin-right:30px;

}
#header_box>.header_search>.search_top{
    margin-top:15px;
    background:#e4393c;
    width:501px;
    height:28px;
    padding:2px;
}
#header_box>.header_search>.search_top input{
    border:none;
    width:415px;
    height:28px;
}
#header_box>.header_search>.search_top button{
    border:none;
    width:86px;
    height:28px;
    margin:0;
    padding:0px;
    background:#e4393c;
    font-size:16px;
    font-weight:600;
    color:#fff;
}
#header_box>.header_search{
    font-size:12px;
}
#header_box>.header_search p{
    padding:5px;
}
#header_box>.header_search a{
    font-size:12px;
}

页脚：

/*页脚盒子部分样式*/
#footer_box .top_box{
    text-align:center;
    margin-top:10px;
}
#footer_box:before{        /*去掉边框以后 容易出现问题 这里防止一下*/
    content:"";
    display:table;
}
#footer_box .top_box a{
    margin:5px;
}
#footer_box .footer_main{
    text-align:center;
    margin-top:10px;
}
#footer_box .footer_bottom{
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}


/*footer部分样式*/
#footer{
    overflow:hidden;
}
#footer:before{        /*去掉边框以后 容易出现问题 这里防止一下*/
    content:"";
    display:table;
}
#footer>div{
    float:left;
    width:242px;
}
/*第一个*/
#footer>.footer_content1>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content1>div:first-child{
    height:40px;
}
#footer>.footer_content1>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat 0px -56px;
}
/*第二个*/
#footer>.footer_content2>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content2>div:first-child{
    height:40px;
}
#footer>.footer_content2>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -49px -56px;
}
/*第三个*/
#footer>.footer_content3>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content3>div:first-child{
    height:40px;
}
#footer>.footer_content3>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -0px -100px;
}

/*第四个*/
#footer>.footer_content4>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content4>div:first-child{
    height:40px;
}
#footer>.footer_content4>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -49px -100px;
}

/*第五个*/
#footer>.footer_content5>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content5>div:first-child{
    height:40px;
}
#footer>.footer_content5>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -0px -147px;
}

关于善知教育（官网：善知教育（点击进入） 微信公众号：善知技术）
地址：北京东燕郊经济技术开发区文化大厦
咨询老师郑老师 电话/微信：13315631002 QQ:1939441377
目前我们开设Java服务器Html5前端网页Android移动端PHP服务器，有全日制班有周末班;
学费优惠至8480!!!!
我们的优势：

• 基础课程一个月免费学,全程面授;
• 平均就业薪资10000-15000;
• 免费重听，跨学科免费学习;
• 5-5.5个月大容量技术授课;
• 0学费0基础入学，海量项目实训, 弹性教学制度;
• 大部分学生找到月薪10k以上薪资工作, 项目实训自然终止;
• 课程全程视频录制,偶尔耽搁也不担心;
• 学习途中随时可以无理由退费根据学生情况;
• 灵活安排授课时间，一个科目学不会可以免费学习另一个科目;
• 全日制班，周末班，网上授课同时进行;
• 技术交流QQ群：198983438（加群请备注在哪里看到我们的群）在群里面随时会更新一些我们的课程视频以及开班动态

善知教育学习视频大汇总

• 善知教育石老师Java视频的网盘地址 http://pan.baidu.com/s/1eQ0JHi6
• 善知教育吕老师Java视频http://pan.baidu.com/s/1i44RTjR
• 善知教育武老师Html5视频http://pan.baidu.com/s/1hsGGKnE
• 善知教育石老师Android知识点http://pan.baidu.com/s/1hsBpOQo