第一篇

搜索框区域

步骤

1. 先一个大盒子
2. 左右两边绝对定位，大盒子相对定位
3. 中间设置一个margin左右即可流式布局
4. 会有外边距坍塌问题，给父盒子加一个overflow：hidden

完成后效果图：

html :

    <div class="search-wrap">
        <div class="search-bth"></div>
        <div class="search"></div>
        <div class="search-login"></div>
    </div>

css:

.search-bth {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}

.search {
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}


.search-login {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    width: 40px;
    height: 44px;
}

内容填充

效果图

步骤:

1. 左边盒子先设置一个伪元素插入图片

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

2. 搜索框里加一个jd标标

html
        <div class="search">
            <div class="jd-icon"></div>
        </div>
        
css

.jd-icon::after {
    position: absolute;
    right: -10px;
    top: 0;
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

二倍精灵图的做法

• 在firework里面把精灵图比例缩放一半
• 之后根据大小测量坐标
• 注意代码礼貌background-size也要写：精灵图原来宽度的一半

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