流式布局京东移动端首页实践(流式布局即百分比布局)

主要知识点：meta视口标签&背景缩放&结构伪类选择器&定位&二倍精灵图

HTML结构

JD

京东超市

京东超市

京东超市

京东超市

京东超市

京东超市

京东超市

京东超市

京东超市

京东超市

思路复盘

头部：一个大盒子里面装四个小盒子，给小盒子设置浮动和百分比宽度

search模块：*.search-wrap大盒子里放三个小盒子，大盒子设置固定定位，小盒子设置绝对定位和相对定位

*中间的.search盒子里又分为三个小盒子，前两个图标使用二倍精灵图制作，后跟一个input表单

nav模块：*.nav大盒子里放十个a，每个a里面放一个img和span

*每个a的宽度设置为20%并给浮动

bottom-nav模块：固定定位，a里面放img

CSS代码

body {

margin: 0 auto;

width: 100%;

max-width: 750px;

min-width: 320px;

background: #fff;

font-size: 14px;

font-family: -apple-system, sans-serif;

line-height: 1.5;

color: #666;

box-sizing: border-box;

}

img {

vertical-align: middle;

}

/* 头部 */

.app {

height: 45px;

}

.app div {

float: left;

color: #fff;

line-height: 45px;

text-align: center;

}

.app div:nth-child(1) {

width: 8%;

}

.app div:nth-child(1) img {

width: 12px;

vertical-align: middle;

}

.app div:nth-child(2) {

width: 10%;

}

.app div:nth-child(2) img {

width: 30px;

vertical-align: middle;

}

.app div:nth-child(3) {

width: 57%;

}

.app div:nth-child(-n+3) {

background-color: #333;

}

.app div:nth-child(4) {

width: 25%;

background-color: #f63515;

}

/* 搜索模块 */

.search-wrap {

position: fixed;

overflow: hidden;

height: 44px;

width: 100%;

max-width: 750px;

min-width: 320px;

}

.search-wrap .search-btn {

position: absolute;

top: 0;

left: 0;

}

.search-wrap .search-btn::before {

content: "";

display: block;

width: 20px;

height: 18px;

background: url(../img/s-btn.png) no-repeat;

background-size: 20px 18px;

margin: 14px 0 0 15px;

}

.search-wrap .search-logion {

position: absolute;

top: 0;

right: 0;

color: #fff;

width: 40px;

height: 40px;

line-height: 40px;

}

.search-wrap .search {

position: relative;

margin: 7px 50px 0 50px;

background-color: #fff;

border-radius: 15px;

text-align: center;

height: 30px;

}

.search-wrap .search .jd-icon {

position: absolute;

top: 7px;

left: 10px;

width: 20px;

height: 15px;

border-right: 1px solid #ddd;

padding-right: 4px;

background: url(../img/jd-sprites.png) no-repeat;

background-position: 0 0;

background-size: 200px auto;

}

.search-wrap .search .sou {

position: absolute;

top: 7px;

left: 35px;

width: 18px;

height: 15px;

background: url(../img/jd-sprites.png) no-repeat;

background-size: 200px;

background-position: -80px 0;

}

.search-wrap .search input {

position: absolute;

top: 6px;

left: 65px;

outline: none;

border: none;

color: #666;

display: inline-block;

text-transform: none;

}

/* focus 模块 */

.focus img {

width: 100%;

}

/* brand模块 */

.brand {

border-radius: 15px 15px 0 0;

overflow: hidden;

}

.brand>div {

width: 33.33%;

float: left;

}

.brand>div img {

width: 100%;

}

/* nav模块 */

nav {

padding-top: 5px;

}

nav a {

width: 20%;

display: block;

text-decoration: none;

float: left;

color: #666;

}

nav a img {

width: 40px;

padding-left: 15px;

margin: 5px 0;

}

/* news模块 */

.news a:nth-child(1) {

width: 50%;

}

.news a:nth-child(n+2) {

width: 25%;

border-left: 1px solid #ddd;

}

.news a {

float: left;

margin-top: 5px;

box-sizing: border-box;

}

.news a img {

width: 100%;

}

/* bottom-nav模块 */

.bottom-nav {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

}

.bottom-nav a {

width: 20%;

float: left;

}

.bottom-nav a img {

width: 100%;

}

知识点浅解

二倍精灵图：*将精灵图缩放为原来的一半background-size

*给x、y位置的时候也写为原本位置的一半backgroun-position

input表单外边框的去除：outline：none；& border：none；

效果展示(手机模型为iPhone8)