1.搜索文本框拼接
html代码:
<div class="header-index-search ">
<div class="mod-search ">
<a class="mod-search-dropdown ">
<span class="mod-search-dropdown-item mod-search-dropdown-item-selected ">课程<i class="icon-font i-v-bottom-small "></i>
</span>
</span>
</a>
<input type="text " class="mod-search_input " maxlength="38 " placeholder="腾讯课堂设计大师班 "/>
<a class="mod-search_btn-search ">
<i class="icon-font i-search-bold "></i>
</a>
</div>
</div>
css样式:
/*box-sizing 属性--start*/
.mod-search {
box-sizing: content-box;
width: 348px;
height: 48px;
position: relative;
border: 1px solid #ccc;
border-radius: 3px;
/*background-color: #FFA500;*/
}
.mod-search-dropdown {
border: 1px solid #ccc;
display: block;
position: absolute;
top: -1px;
left: -1px;
cursor: pointer;
color: #333;
/*background-color: #FF1493;*/
}
.mod-search-dropdown-item {
display: block;
position: relative;
width: 62px;
height: 48px;
line-height: 48px;
text-indent: 10px;
}
.mod-search_input {
box-sizing: content-box;
width: 225px;
height: 30px;
line-height: 30px;
margin: 0 0 0 62px;
padding: 10px 10px 10px 0;
background: 0 0;
text-indent: 12px;
vertical-align: top;
border: 0;
}
.mod-search_btn-search {
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: -1px;
right: -1px;
background-color: #23b8ff;
border-radius: 0 3px 3px 0;
text-align: center;
color: #fff;
}
/*box-sizing 属性--end*/
2.