flex布局 H5携程移动端头部个人中心和图标 （三）

先看做的部分,头部右边

我实现的效果

实现思路：
1、先把父亲分成左右两部分（我们现在做的是右边部分）
2、右边这部分是固定死的 44px*44px
3、左边这部分就是给了flex：1把剩余的空间给占满
4、右边这个图标我是通过：：before伪元素来做的
5、头像图标是采用的精灵图缩小2倍的做法
6、最后调整字体大小和间距。

代码部分
在父盒子里边创建一个子盒子（search放图标用的）和一个子超链接（user文字跳转）

 <div class="searchBox">
        <div class="search"></div>
        <a href="" class="user">我的</a>
    </div>
1
2
3
4

2、
先实现基础效果

.user{
    width: 44px;
    height: 44px;
    background-color: purple;
    font-size: 12px;
    color: #2eaae0;
    text-align: center;
}
1
2
3
4
5
6
7
8

flex: 1;搜索框弹性剩余的空间给占满

.search{
    flex: 1;
}
1
2
3

再写右边部分的图标和文字

.user::before{
    /*  */
    content: '';
    /* 由内元素变成块元素  父级必须给display:flex */
    display: block;
    width: 23px;
    height: 23px;
    /* url加载精灵图标   no-repeat图标不重复   -59px -194px 显示图标缩放后的位置 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 缩放图标 104px来源于为原图片宽度208px缩放后的宽度 */
    background-size: 104px auto;
    /* 在这里 5px是指图标往下5px   auto是指图标和文字都居中   0 是往上移动 */
    margin: 5px auto 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果是这样滴

3、
调整字体大小和间距
把文字居中 ；给颜色；调文字大小

	.user{
    width: 44px;
    height: 44px;
    background-color: purple;
    font-size: 12px;
    color: #2eaae0;
    text-align: center;
}
1
2
3
4
5
6
7
8

去超链接下划线

a{
    text-decoration:none
}
1
2
3

最终效果是这样的

精灵图