/* 搜索模块 */
.search-wrap {
position: fixed;
/* 解决子盒子.search外边距合并问题 */
overflow: hidden;
height: 44px;
/* 固定定位的盒子需给定宽度 ，且给百分比需在一定范围内*/
width: 100%;
max-width: 640px;
min-width: 320px;
}
/* 左右两个盒子用定位 不占位置*/
.search-wrap .search-btn,
.search-wrap .search-login {
position: absolute;
top: 0;
width: 40px;
height: 44px;
}
.search-wrap .search-btn {
left: 0;
}
.search-wrap .search-login {
right: 0;
}
/* 使用伪元素添加小图标 */
.search-wrap .search-btn::after {
content: "";
display: block;
position: absolute;
bottom: 12px;
right: 6px;
width: 20px;
height: 18px;
background: url(../images/s-btn.png) no-repeat;
/* 背景图缩放 */
background-size: 20px 16px;
}
/* 中间盒子不给宽，左右margin值留出空白，使盒子能跟随设备宽度伸缩 */
.search-wrap .search {
position: relative;
height: 30px;
margin: 7px 50px 0;
background-color: #fff;
border-radius: 15px;
}
/* 放大镜 */
.search-wrap .search .sou {
position: absolute;
top: 8px;
left: 53px;
width: 18px;
height: 15px;
/* 二倍精灵图技术，先缩放整张精灵图后再量坐标，代码里精灵图尺寸也要缩放 */
background: url(../images/jd-sprites.png) no-repeat -83px 0;
background-size: 200px;
}
/* 主体内容 */
/* 滑动图 */
.main-content .slider img {
width: 100%;
}
/* 品牌日 */
.main-content .brand div {
float: left;
width: 33.33%;
}
.main-content .brand div img {
width: 100%;
}
/* 导航模块 */
.main-content .nav a {
/* 添加浮动就不需要转换行内块 */
float: left;
width: 20%;
text-align: center;
}
.main-content .nav a img {
width: 40px;
margin: 10px 0;
}
.main-content .nav a span {
/* 转换为块级元素，另起一行显示 */
display: block;
}
