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