6.搜索模块内容制作

index.html

  <!-- 搜索 -->
  <div class="search-wrap">
    <!-- wrap 是容器的意思 -->
    <div class="search-btn"></div>
    <div class="search">
      <div class="jd-icon"></div>
    </div>
    <div class="search-login">登录</div>
  </div>

index.css

/* 搜索 */
.search-wrap {
  position: relative;
  overflow: hidden;
  height: 44px;
}

.search-wrap .search-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 44px;
}

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

.search-wrap .search {
  position: relative;
  height: 30px;
  background-color: skyblue;
  margin: 7px 50px;
  border-radius: 15px;
}

.search-wrap .search .jd-icon {
  position: absolute;
  top: 8px;
  left: 15px;
  width: 20px;
  height: 15px;
  background: url(../images/jd.png);
  background-size: 20px 15px;
}

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

.search-wrap .search-login {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #fff;
}