图文教程
【以上教程已经尽量去写的详细了，有没有说到的地方 理解下，回复里面问就好。上面只是对搜索进行了简单的分析，至于如何将搜索做成你设计的效果，只需要修改input里面的style的样式就可以了。】
下面是上面教程里面的搜索代码：
<!--店铺搜索条代码-->
<form action="http://cisdesign.taobao.com/search.htm" method="get" target="_blank">
<!--表单的标签是form，注意些的时候标签成对出现，开始和结束的-->
<input name="keyword" value="米色设计" title="这个是输入框部分" style="background-image:url(搜索_01.png); width:324px; height:33px; border:0px; outline:none; float:left; text-indent:35px; color:#CC9966;" />
<input type="submit" value="搜索" title="这个是搜索按钮" style="background-image:url(搜索_02.png); width:63px; height:33px; border:0px; outline:none; float:left; text-indent:65px;"/>
</form>
<!--现在还要做一个事情，就是怎么把这个搜索条做成自己设计的样子。给input指定样式-->
下面是整理后的搜索模板
<!--搜索框模板-->
<form action="你店铺的地址/search.htm" method="get" target="_blank">
<input name="keyword" value="输入框默认文字" style="background-image:url(输入框背景图地址); width:输入框背景图宽度px; height:输入框背景图高度px; border:0px; outline:none; float:left; text-indent:35px; color:#CC9966;" />
<input type="submit" value="搜索" style="background-image:url(搜索按钮背景图地址); width:搜索按钮背景图宽度px; height:搜索按钮背景图高度px; border:0px; outline:none; float:left; text-indent:65px;"/>
</form>
<!--搜索框模板结束-->
有小伙伴要吐槽了。现在我可以自己做一个搜索框了，但是怎么把搜索框放到我想要放的位置呢，因为实际工作中，不可能就简单这样加搜索框就可以
那这里米色就举个简单例子
<div style="width:950px; height:120px; background-image:url(背景图地址); position:relative;" data-source="假如这里是你现有的一个效果代码">
<!--将下面的搜索框部分代码，直接放到你想放的位置的代码里，然后你想让搜索框以谁为参照定位移动，就给谁加一个position:relative;-->
<!--注意：参照物必须把搜索框代码包起来才行-->
<div class="footer-more-trigger most-footer sn-simple-logo" style="width:搜索框宽度px; height:搜索框高度px; position:absolute; left:距左px; top:距右px; z-index:5; border:0; padding:0; background: transparent;">
<form action="你店铺的地址/search.htm" method="get" target="_blank">
<!--表单的标签是form，注意些的时候标签成对出现，开始和结束的-->
<input name="keyword" value="输入框默认文字" style="background-image:url(输入框背景图地址); width:输入框背景图宽度px; height:输入框背景图高度px; border:0px; outline:none; float:left; text-indent:35px; color:#CC9966;" />
<input type="submit" value="搜索" style="background-image:url(搜索按钮背景图地址); width:搜索按钮背景图宽度px; height:搜索按钮背景图高度px; border:0px; outline:none; float:left; text-indent:65px;"/>
</form>
</div>
</div>
如果有代码基础的话，可以通过修改搜索框代码里面的CSS样式，把搜索框做成你想要的样子。如果没有代码基础，我建议PS里面涉及好搜索框的效果，然后给搜索框添加背景图。注意尺寸就可以。
代码有难度，看起来会比较累，我尽量写的很详细了，如果还是有不明白的可以留言问哈