HTML淘宝搜索框

<div style="overflow:hiddenclear:bothbackground:#ffffont-family:arialcolor:#646464zoom:1border:1pxsolid #008ffe">

<div style="float:leftpadding:14px 10px 0 15px_padding:16px 10px 015px">

<h3>本店搜索</h3>

</div>

<div style="float:leftpadding-bottom:10px"><form method="get"action="店铺地址/category.htm" name="SearchForm"><input type="hidden" value="y" name="search">

<ul>

<li style=" overflow:hiddenmargin-top:10pxfloat:left">

<label for="keyword"> <input type="text"class="keyword-input J_TKeyword prompt" value=""autocomplete="off" name="keyword" size="18"style="height:20pxline-height:20pxwidth:260pxmargin-right:6pxtext-indent:4pxcolor:#333background:#FFFborder:1px solid #ddd">

</label>

</li>

<li style=" overflow:hiddenmargin-top:10pxfloat:left"><input type="submit" class="J_TSubmitBtn btn" value="搜索"style="background:#555555width:48pxheight:22pxline-height:22pxmargin-left:10pxborder:nonecolor:#FFFfont-weight:700cursor:pointer">

</li>

</ul>

</div>

</div>

<script type='text/javascript'>

alimama_pid='mm_10603829_0_0'

alimama_type='g'

alimama_tks={}

alimama_tks.style_i=1

alimama_tks.lg_i=1

alimama_tks.w_i=572

alimama_tks.h_i=69

alimama_tks.btn_i=1

alimama_tks.txt_s=''

alimama_tks.hot_i=1

alimama_tks.hc_c='#0065FF'

alimama_tks.c_i=1

alimama_tks.cid_i=0

</script>

<script type='text/javascript' src='http://a.alimama.cn/inf.js'></script>

定义一个input和submit。通过css去掉边框，然后添加背景。那个一点击就消失的文字是js添加的特效。自己写对新手有难度，而且容易溢出。推荐直接到懒人图库等素材站下载别人做好的改动一下即可。反正这种框子基本上都是大同小异。

---