有下拉的搜索框

今天一上就做出来这么个玩意,真的伤。。。

不过总算是做出来,样式勉强能看。有需要的可以参考一下

代码没有提炼 比较乱就是,先看下具体样式吧


css :

                        html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}

.h-img {
width: 100%;
height: auto;
text-align: center;
}

.h-ss {
position: relative;
top: -40px;
left: 5%;
display: flex;/*弹性布局*/
flex-flow: row;/*单排*/
margin: 0;
padding: 0;
width: 90%;
height: 30px;
text-align: center;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
}

.h-ss .h-qz {
padding: 0;
margin: 0;
width: 20%;
height: 30px;
background-color: red;
border-radius: 15px 0px 0px 15px;
}

.h-ss .h-qz select {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
border-radius: 15px 0px 0px 15px;
}

.h-ss .h-inp {
width: 60%;
height: 30px;
border: 0;
}

.h-ss .h-inp input {
width: 100%;
height: 30px;
font-size: 0.9em;
border-radius: 0px 0px 0px 0px;
border: 0;
}

.h-ss .h-s-img {
width: 20%;
height: 100%;
border-radius: 0px 15px 15px 0px;

}


html :

<div class="h-img">
<img src="img/public.png" width="100%" />

<div class="h-ss">


<div class="h-qz">
<select name="">
<option value="">全站</option>
</select>

</div>


<div class="h-inp">
<input placeholder="输入关键字查找..." name="" id="" value="" />

</div>


<div class="h-s-img">
<img src="img/qy-ss.png" width="50%" height="100%" />
</div>
</div>

</div>

OK! 有什么问题可以在评论里面问

猜你喜欢

转载自blog.csdn.net/qq_38026437/article/details/80757867