搜索框是我們在瀏覽各個網(wǎng)站時最常見到的網(wǎng)站功能之一，其實對于從事 網(wǎng)站建設(shè) 工作的人員來說，我們不僅僅是要將它的功能優(yōu)化，對于它的美觀度也不可忽視。下面帶大家做一個簡單的搜索框，大家都mark起來吧！ 效果圖： 文中所用到的圖片： 首先，我們將它分
搜索框是我們在瀏覽各個網(wǎng)站時最常見到的網(wǎng)站功能之一，其實對于從事
網(wǎng)站建設(shè)工作的人員來說，我們不僅僅是要將它的功能優(yōu)化，對于它的美觀度也不可忽視。下面帶大家做一個簡單的搜索框，大家都mark起來吧！
效果圖：
文中所用到的圖片：
首先，我們將它分成左右兩邊，左側(cè)呢就是我們搜索框，右側(cè)就只有圖片，因此html布局應(yīng)該這樣寫：
<body style="background:#FC9">
<div class="search">
<input name="" type="image" id="sear" src="images/search.jpg"/>右側(cè)的圖標(biāo)
<div class="text"> <input type="text" value="請輸入關(guān)鍵字" onfocus="if (value =='請輸入關(guān)鍵字'){value =''}" onblur="if (value ==''){value='請輸入關(guān)鍵字'}" id="tex" name="textfield" /></div>左側(cè)的搜索框
</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>
到這里一個搜索框可以說已經(jīng)完成啦，具體樣式可根據(jù)自己的需要再進(jìn)行調(diào)整。
