find.png
--css
/*@zxyuns --2018-10-10添加分类和搜索框*/
.tl-tag-active{
width:80px;
height:30px;
line-height: 30px;
background:#FB633C;
border-radius:15px;
text-align: center;
margin-left: 20px;
color: #FFFFFF;
}
.tl-tag{
width:80px;
height:30px;
line-height: 30px;
background:#E5E5E5;
border-radius:15px;
text-align: center;
margin-left: 20px;
color: #666666;
}
.jd_header {
box-sizing: border-box;
position: fixed;
height: 45px;
width: 100%;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
z-index: 50;
background-color: #FB633C;
}
.jd_header .header_search {
box-sizing: border-box;
padding-left: 10px;
width: 100%;
height: 37px;
margin-top: 4px;
border-radius: 17px;
background: rgba(255,255,255,0.9);
font-size: 14px;
color: #999;
border: none;
}
.jd_header .header_glass {
display: inline-block;
position: absolute;
right: 36px;
top: 15px;
width: 20px;
height: 20px;
background: url('../../assets/img/finds.png')no-repeat;
background-size: 16px 16px;
}
--html
<header>
<div class="jd_header">
<input type="search" class="header_search" id="searchInput" placeholder="输入关键字搜索">
<i class="header_glass"></i>
</div>
</header>
