HTML5_京东首页（主体部分）

/*页面主体部分样式*/
#life_word header{
height:30px;
line-height:30px;
}
#life_word header h3{
font-family:"宋体";
display:inline-block;
}
#life_word header i{
color:#aaa;
font-size:12px;
}
#life_word section{
overflow:hidden;
}
#life_word section>ul>li{
width:297.75px;
float:left;
height:190px;
margin-right:5px;
}

/*生活橱窗样式*/
#life_word section>ul>li{
background:#f00;

}
/*第一个小广告*/
#life_word section>ul>li:nth-child(1){
background: url(../images/index/show_01.jpg) no-repeat;
transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(1):hover{
background: url(../images/index/show_01.jpg) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(1)>div{
width:109px;
height:150px;
background:rgba(255,255,255,0.6);
/*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
padding:20px 20px;

}
#life_word section>ul>li:nth-child(1)>div ul{
margin-top:15px;
}
#life_word section>ul>li:nth-child(1)>div p{
color:red;
}
#life_word section>ul>li:nth-child(1)>div ul i{
display:inline-block;
width:0px;
height:0px;
border:1.5px solid #666;
vertical-align:middle;
}

/*第二个小广告*/
#life_word section>ul>li:nth-child(2){
background: url(../images/index/show_02.jpg) no-repeat;
transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(2):hover{
background: url(../images/index/show_02.jpg) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(2)>div{
width:109px;
height:150px;
background:rgba(255,255,255,0.6);
/*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
padding:20px 20px;

}
#life_word section>ul>li:nth-child(2)>div ul{
margin-top:15px;
}
#life_word section>ul>li:nth-child(2)>div p{
color:#fff;
background:red;

float:left;
}
#life_word section>ul>li:nth-child(2)>div ul i{
display:inline-block;
width:0px;
height:0px;
border:1.5px solid #666;
vertical-align:middle;
}
/*第三个小广告*/

#life_word section>ul>li:nth-child(3){
background: url(../images/index/show_03.jpg) no-repeat;
transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(3):hover{
background: url(../images/index/show_03.jpg) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(3)>div{
width:109px;
height:150px;
background:rgba(255,255,255,0.6);
/*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
padding:20px 20px;

}
#life_word section>ul>li:nth-child(3)>div ul{
margin-top:15px;
}
#life_word section>ul>li:nth-child(3)>div p{
color:red;

}
#life_word section>ul>li:nth-child(3)>div ul i{
display:inline-block;
width:0px;
height:0px;
border:1.5px solid #666;
vertical-align:middle;
}

/*第四个小广告*/
#life_word section>ul>li:nth-child(4){
background: url(../images/index/show_04.png) no-repeat;
transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(4):hover{
background: url(../images/index/show_04.png) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(4)>div{
width:109px;
height:150px;
background:rgba(255,255,255,0.6);
/*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
padding:20px 20px;

}
#life_word section>ul>li:nth-child(4)>div b{
color:red;
font-size:2em;
font-weight:400;
}
#life_word section>ul>li:nth-child(4)>div ul{
margin-top:15px;
}
#life_word section>ul>li:nth-child(4)>div p{
color:red;

}
#life_word section>ul>li:nth-child(4)>div ul i{
display:inline-block;
width:0px;
height:0px;
border:1.5px solid #666;
vertical-align:middle;
}

/*三个小广告部分样式*/
#advert{                        /*这个自己下去考虑 什么办法都行 */
text-align:center;
}

/*一楼样式*/
#f1    header{
overflow:hidden;
}
#f1    header>p,#f1 header>h3,#f1 header>ul,#f1 header>div{
float:left;
}
#f1 header>ul>li{
float:left;
}
#f1    header>p{
width:30px;
height:35px;
background:url(../images/index/index_iconlist_01.png) no-repeat 2px 0px;
color:#fff;
font-size:16px;
font-weight:600;
text-align:center;
line-height:30px;
font-family:"宋体";
border-bottom:2px solid #999;
}
#f1    header>p:hover{
background:url(../images/index/index_iconlist_01.png) no-repeat -38px 0px;
}
#f1    header>h3{                /*1211-209-788.3-30*/
line-height:35px;
border-bottom:2px solid #999;
width:184px;
text-align:center;
}
#f1    header>ul{
width:788px;
height:35px;
}
#f1    header>ul li{
width:157.6px;
line-height:35px;
text-align:center;
border-bottom:2px solid #999;
}
#f1    header>ul li:hover{
border-bottom:2px solid #e4393c;
background:url(../images/index/tab_arraw.png) no-repeat bottom center;
}

#f1    header div{
width:209px;
border-bottom:2px solid #999;
height:35px;
line-height:35px;
text-align:right;

}
#f1    header div a{
color:#0058bb;
}