搜索框是我們在瀏覽各個網站時最常見到的網站功能之一，其實對于從事 網站建設 工作的人員來說，我們不僅僅是要將它的功能優化，對于它的美觀度也不可忽視。下面帶大家做一個簡單的搜索框，大家都mark起來吧！ 效果圖： 文中所用到的圖片： 首先，我們將它分
搜索框是我們在瀏覽各個網站時最常見到的網站功能之一，其實對于從事
網站建設工作的人員來說，我們不僅僅是要將它的功能優化，對于它的美觀度也不可忽視。下面帶大家做一個簡單的搜索框，大家都mark起來吧！
效果圖：
文中所用到的圖片：
首先，我們將它分成左右兩邊，左側呢就是我們搜索框，右側就只有圖片，因此html布局應該這樣寫：
<body style="background:#FC9">
<div class="search">
<input name="" type="image" id="sear" src="images/search.jpg"/>右側的圖標
<div class="text"> <input type="text" value="請輸入關鍵字" onfocus="if (value =='請輸入關鍵字'){value =''}" onblur="if (value ==''){value='請輸入關鍵字'}" id="tex" name="textfield" /></div>左側的搜索框
</div>
</body>
這里body先隨便給個顏色，方便看我們搜索框的顏色。
接下來就是CSS樣式啦：
<style type="text/css">
.search {width:220px; height:30px; margin-top:45px; margin-left:50%;}
.search #sear {width:40px; height:30px; float:right;}
.text {width:160px; height:28px; float:left; padding-left:15px;}
#tex { width:100%; height:28px; background:#fff; line-height:28px; padding-left:5px; border:none; color:#999;}
</style>
到這里一個搜索框可以說已經完成啦，具體樣式可根據自己的需要再進行調整。
