定義一個前端div
<div class="site-search">
<div id="search">
<input type="text" name="s" class="text" placeholder="輸入關鍵字搜索" />
<button type="button" onclick="javascript:doSearch();" class="submit">搜索</button>
</div>
</div>
關鍵代碼篙悯，樣式調整
.site-search{
width:25%;
float:right;
width:250px;
height:50px;
}
#search{
position:relative;
margin-top:15px;
}
#search input{
padding-right:30px;
}
#search button{
position:absolute;
right:4px;
top:2px;
border:none;
padding:0;
width:24px;
height:24px;
background:url("static/images/search.png") no-repeat scroll right center transparent;
direction:ltr;
text-indent:-9999em;
}
實現效果
在這里插入圖片描述
項目全部代碼在自己的開源項目：https://github.com/u014427391/myblog
