flex布局 H5携程移动端头部搜索框 （四）

1、实现效果的部分

2、实现思路
1、给左侧的搜索框给个高度和一个边框；
2、把放大镜放进去，使用的是：：before伪类元素
3、把文字放进去，修改文字大小；垂直居中；修改位置和颜色
4、再给边框来个阴影

实现步骤
1、给左侧的搜索框给个高度和一个边框；

.search{
    flex: 1;
    height: 26px;
    border: 1px solid #ccc;
    /* 上下间距6  左右10 */
    margin: 7px 10px;
    border-radius: 5px;
}

2、把放大镜放进去

.search::before{
    content: '';
    /* 由内元素变成块元素 然后就能设置高了 */
    display: block;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    margin: 5px;
}

3、把文字放进去

 <div class="search">搜索:目的地/酒店/景点/航班号</div>

造成文字没有出现在表格原因是：因为放大镜我们给它的是块元素；所以文字只能在下边显示喽。
解决方法：把放大镜块元素换成绝对定位用padding来实现
注意事项：加了绝对定位的盒子就有大小了；所以display: block可以省掉；margin就不起效果了

.search{
    position: relative;
    font-size: 12px;
    color: #666;
    /* 为啥给25px  因为放大镜是15*15  然后再给他向左10px间距 就变成25了 */
    padding-left: 25px;
    /* css 一般height高多少 line-height就给多少 */
    /* css3 得把边框算进去;  */
    line-height: 24px;
    flex: 1;
    height: 26px;
    border: 1px solid #ccc;
    /* 上下间距6  左右10 */
    margin: 7px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.search::before{
    content: '';
    /* 由内元素变成块元素 然后就能设置高了 */
    /* display: block; */
    /* 加了绝对定位的盒子就有大小了 ;所以display: block可以省掉 ;用定位,margin就不起效果了 */
    position: absolute;
    top: 5px;
    left: 5px;

    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    /* margin: 5px; */
}

添加背景颜色和边框线

.search{
margin: 7px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

调整我的文字位置 把user::before里边margin 0 换成-2px 就是文字往上顶一顶

.user::before{
 margin: 5px auto -2px;
}

最终效果