大致分布

image.png

  1. <body>
  2.   <div class="searchFixed">
  3.     <a href="#" class="classify">
  4.       <!-- <img src="images/searchFixed1.png" alt=""> -->
  5.     </a>
  6.     <div class="search"></div>
  7.     <a href="#" class="login">
  8.     </a>
  9.   </div>
  10. </body>

a {
  text-decoration: none;
}

.searchFixed {
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 1.1733rem;
  background-color: #ffdb47;
}

.searchFixed .classify {
  width: .48rem;
  height: .8rem;
  background: url(../images/searchFixed1.png) no-repeat;
  background-size: .48rem .8rem;
  /*背景图也需要根据屏幕大小改变而改变，
  background-size: 就设置为和width、height一样的大小就OK;
  */
  margin: .1467rem .3333rem .0933rem .32rem;
}

.searchFixed .search {
  flex: 1;
}

.searchFixed .login {
  width: .48rem;
  height: .8rem;
  margin: .1333rem;
  background: url(../images/searchFixed2.png) no-repeat;
  background-size: 100% 100%;
  /*背景图也需要根据屏幕大小改变而改变，
  background-size: 就设置为和width、height一样的大小就OK;
  也可以直接写100% 100%
  */

}

中间搜索输入

image.png

<!-- 顶部固定搜索 -->
<div class="searchFixed">
  <a href="#" class="classify">
    <!-- <img src="images/searchFixed1.png" alt=""> -->
  </a>
  <div class="search">
    <form action="#">
      <input type="search" placeholder="三星S22系列100元预定">
    </form>
  </div>
  <a href="#" class="login">
  </a>
  </div>


.searchFixed .search {
  flex: 1;
}

.searchFixed .search input {
  height: .8533rem;
  border-radius: .8533rem;
  width: 100%;
  border: 0;
  margin-top: .16rem;
  padding: .04rem .2667rem 0 .8667rem;
  font-size: .3733rem;
}

input {
  /* 去除点击输入框时的轮廓效果 */
  outline: none;
}