5.搜索模块布局

https://www.bilibili.com/video/BV1pE411q7FU?p=425&spm_id_from=pageDriver
idnex.html

  <!-- 搜索 -->
  <div class="search-wrap">
    <!-- wrap 是容器的意思 -->
    <div class="search-btn"></div>
    <div class="search"></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;
  background-color: blue;
}

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

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