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;
}