前端入门到熟悉day12

京东其他两个页面：1分类 2购物车
/* 分类页和购物车页面公共样式的topBar /
.jd_topBar{
height: 45px;
width: 100%;
background: url("…/images/header-bg.png") repeat-x;
background-size: 1px 45px;
border-bottom: 1px solid #e0e0e0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.jd_topBar .icon_back{
width: 40px;
height: 44px;
background-position: -20px 0;
display: block;
padding: 12px 10px;
background-clip: content-box;
background-origin: content-box;
position: absolute;
left: 0;
top: 0;
}
.jd_topBar .icon_menu{
height: 20px;
width: 20px;
background-position: -60px 0;
display: block;
background-clip: content-box;
background-origin: content-box;
position: absolute;
right: 0;
top: 0;
margin:12px 10px;
}
.jd_topBar form{
width: 100%;
height: 44px;
padding: 0 40px;
}
.jd_topBar form input{
width: 100%;
height: 30px;
line-height: 42px;
font-size: 12px;
border: 1px solid #bfbfbf;
border-radius: 4px;
padding: 0 8px;
margin-top: 7px;
}
.jd_topBar h2{
width: 100%;
height: 44px;
line-height: 42px;
font-size: 16px;
color: #000;
font-weight: inherit;
text-align: center;
}
/ 底部导航区域 */
.commonNav{
position: fixed;
width: 100%;
padding: 0;
margin: 0;
left: 0;
bottom: 0;
z-index: 999;
box-sizing: border-box;
list-style: none;
background-color: #fff;
box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
-webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
-moz-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
font-size: 16px;
background-color: rgb(255, 255, 255);
}
.commonNav ul{
width: 100%;
margin: 0 auto;
}
.commonNav ul li{
float: left;
width: 20%;
}
.commonNav ul li img{
width: 100%;
}