移动端三种布局方式之流式布局-移动端京东首页

结果图

思路解析及注意点

1. 顶部

头部通栏的大盒子宽度是100%，里面划分成四个小盒子，用ul li排列 四个li高度相同 设置不同宽度，让四个盒子里的内容垂直居中
为了代码规范，图片都要放在盒子里，改动盒子内图片大小直接设置就可以。

.app ul li:nth-child(1){
   
    width: 8%;
}
/* 图片可以直接改宽，等比例缩放*/
.app ul li:nth-child(1) img{
   
width: 10px;
}

.app ul li:nth-child(2){
   
    width: 10%;
}
.app ul li:nth-child(2) img{
   
    width: 30px;
}
.app ul li:nth-child(3){
   
    width: 57%;
}
.app ul li:nth-child(4){
   
    width: 25%;
    background-color: #F63515;
}

 

这里有个注意点：以往给所有的小li 设置line-height:行高 和 text-align:center 能让所有盒子里的行内元素和行内块元素垂直居中显示（图片和文字是行内元素），但这里不行。
如图

原因：图片默认与文字基线对齐，第一二个小li都排列位置不准，由于第一个图片很小，所以看起来偏差不大

解决方法：给index.css添加初始化代码

img {
   
    vertical-align: middle;
} 

2. 头部

（1）头部通栏的大盒子中间放三个盒子。大盒子要设置高度。（老是忘记）
左右两个盒子用绝对定位定在两侧（脱离标准流），中间的盒子不设置宽度（标准流），默认和父元素一样宽，左右设置margin值，空出两个盒子的距离。
通栏大盒子固定在浏览器上部，给大盒子一个固定定位，在大盒子里增加代码 position:fixed

 

这里有个注意点：给中间盒子加 上边距后，父盒子塌陷

.search {
   
    position: relative;
    height: 30px;
    /* 父级边框塌陷也叫外边距合并问题，有四种方法可以解决，在这里我们使用给父级边框加一个overflow:hidden */
    margin: 7px 50px;
    border-radius: 15px;
    background-color: #fff;
}

解决方法：给父盒子加一个overflow:hidden
 

（2）左边的盒子里的图片是用伪元素写的(我不知道为什么不能直接把图片放到这个定位的盒子里，就这么写吧):伪元素是行内元素，转化为块元素才能设置宽高，content属性必须写。
background-size: 20px 18px;用来修改背景图片大小！！牛逼！

.search-btn::before{
   
    display: block;
    width: 20px;
    height: 18px;
    content: '';
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin:14px 0 0 15px;
}

 

（3）中间的盒子里面放了两个盒子，分别用来放两个图标（左边jd图标是背景图，右边放大镜是精灵图），然后用绝对定位把图标调整到盒子正确的位置里，图标中间的竖线是用伪元素写的。两个盒子都需要调成和图片一样的大小。
 
jd图标和竖线做法

.jd-icon{
   
    position:absolute;
    top: 0;
    left: 5px;
    width: 20px;
    height: 15px;
    background:url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
    margin: 8px 8px 0 15px;
}
.jd-icon::after{
   
    position: absolute;
    top: 0;
    right: -5px;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
}

 
放大镜做法（重点!!！二倍精灵图）（有写博客）

.sou {
   
    position: absolute;
    top: 8px;
    left:56px;
    width: 18px;
    height: 15px;
    background-color: pink;
    background: url(../images/jd-sprites.png) no-repeat -83px 0;
    background-size:200px;
}

 

3.主体内容

（1）导航栏部分 在流式布局中不需要用ul li 直接用10个小a让他们浮动起来，一个占父盒子宽度的20%就行了