淘宝搜索框架
下载一个非IE内核浏览器（IE浏览器操作略麻烦），如google的chrome，然后打开别家的淘宝店铺页面，找到搜索栏。单击鼠标右键，选择“审查元素（有的也叫查看源文件，查看源代码）”，就可以看到了
② 像淘宝一样搜索框怎么弄
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝网选项卡类型搜索框样式代码</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".bodys p").not(":first").hide();
$(".searchbox ul li").mouseover(function(){
var index = $(this).index();
if(index==0){
$(this).find("a").addClass("style1");
$("li").eq(1).find("a").removeClass("style2");
$("li").eq(2).find("a").removeClass("style3");
}
if(index==1){
$(this).find("a").addClass("style2");
$("li").eq(0).find("a").removeClass("style1");
$("li").eq(2).find("a").removeClass("style3");
}
if(index==2){
$(this).find("a").addClass("style3");
$("li").eq(0).find("a").removeClass("style1");
$("li").eq(1).find("a").removeClass("style2");
}
var index=$(this).index();
$(".bodys p").eq(index).show().siblings().hide();
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* searchbox */
.searchbox{width:520px;height:80px;margin:40px auto 0 auto;}
.searchbox ul{ height:35px; width:500px; list-style:none; margin-left:20px}
.searchbox ul li{ float:left}
.searchbox ul li a{ float:left; line-height:35px; padding:0 20px; text-decoration:none; color:#000; font-size:14px; font-weight:bold;}
.searchbox ul li .style1{ background-color:#000; color:#fff}
.searchbox ul li .style2{ background-color:#f00;color:#fff}
.searchbox ul li .style3{ background-color:#F90;color:#fff}
.bodys input{ height:30px;line-height:30px;width:390px;padding:0 10px;float:left;}
.bodys .one{ border:#000 3px solid}
.bodys .two{ border:#f00 3px solid}
.bodys .three{ border:#F90 3px solid}
.bodys .one1{ background-color:#000; }
.bodys .two2{ background-color:#f00;}
.bodys .three3{ background-color:#F90;}
.bodys button{float:left;border:0;height:36px;width:100px; color:#FFF; line-height:36px;text-align:center;overflow:hidden;}
</style>
</head>
<body>
<div class="searchbox">
<ul class="border1">
<li><a href="#" class="style1">宝贝</a></li>
<li><a href="#">天猫</a></li>
<li><a href="#">店铺</a></li>
</ul>
<div class="bodys">
<p><input type="text" value="" id="" class="one" placeholder="输入宝贝" /><button class="one1">搜索</button></p>
<p><input type="text" value="" id="" class="two" placeholder="输入宝贝" /><button class="two2">搜索</button></p>
<p><input type="text" value="" id="" class="three" placeholder="输入店铺" /><button class="three3">搜索</button></p>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
希望我的回答可以帮到您哦
③ 淘宝店铺搜索框代码
<divclass="sousuo"style="padding:2px10px;border:0pxsolidrgb(0,0,0);width:600px;line-height:16px;font-size:12px;">
<spanstyle="margin:0px;line-height:16px;padding-top:3px;font-size:12px;float:right;"><fontstyle="color:rgb(51,51,51);">热门搜索：
</font>
<astyle="color:rgb(255,0,0);"target="_blank"href="店铺地址">男装</a>
<astyle="color:rgb(255,0,0);"target="_blank"href="店铺地址">女装</a>
</span>
<formaction="
http://shop60694162.taobao.com
"method="post"style="margin:0px;padding:0px;"target="_blank">
<inputtype="hidden"value=""name="baobei_type"/>
<spanstyle="margin:0px;padding:0px;color:rgb(0,0,0);font-weight:bold;">搜索和价格：</span>
<inputstyle="width:100px;line-height:16px;font-size:12px;"type="text"value=""name="keyword"/>
<spanstyle="margin:0px;padding:0px;color:rgb(0,0,0);">价格：</span>
<inputstyle="width:35px;line-height:16px;font-size:12px;"type="text"value=""name="lowPrice"/>
<spanstyle="margin:0px;padding:0px;">-</span>
<inputstyle="width:35px;line-height:16px;font-size:12px;"type="text"value=""name="highPrice"/>
<inputstyle="margin:0px;padding:0px10px;color:rgb(255,255,255);font-size:12px;background-color:rgb(0,0,0);_padding:3px5px1px5px;"type="submit"value="搜索"/>
</form>
</div>
④ 淘宝导航搜索框代码
自己做只有一种办法，把店招和导航做到一张图上，把店招设置高度为150，图片用map标签就可以实现。map标签怎么用网上有大把教程
⑤ 淘宝搜索后的右侧框 是什么推广
来是淘宝“直通车”推广。
淘自宝直通车是由阿里巴巴集团下的雅虎中国和淘宝网进行资源整合，推出的一种全新的搜索竞价模式。竞价结果不只可以在雅虎搜索引擎上显示，还可以在淘宝网（以全新的图片+文字的形式显示）上充分展示。每件商品可以设置200个关键字， 卖家可以针对每个竞价词自由定价，并且可以看到在雅虎和淘宝网上的排名位置，排名位置可用淘大搜查询，并按实际被点击次数付费。（每个关键词最低出价0.05元 最高出价是99元，每次加价最低为0.01元）。
⑥ 淘宝搜索框怎么做啊
<div style="padding-bottom: 12px; line-height: 32px; background-color: #…ight: 12px; height: 40px; font-size: 12px; padding-top: 12px">
<form style="background:#0F0" method="get" action="你的店铺地址/search.htm" name="SearchForm" target="_blank">
<input type="hidden" name="baobei_type"></input>
<span style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding…ht: 0px; color: #990000; font-weight: bold; padding-top: 0px">
本店搜索：
</span>
<input style="line-height: 16px; width: 150px; font-size: 12px" name="keyword"></input>
<span style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; color: #990000; padding-top: 0px">
价格：
</span>
<input style="line-height: 16px; width: 50px; font-size: 12px" name="lowPrice"></input>
<span style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; color: #990000;">
-
</span>
<input style="line-height: 16px; width: 50px; font-size: 12px" name="highPrice"></input>
<input type="submit" value="搜索" style="border-bottom: medium none; border-left: medium none; paddin…op: medium none; border-right: medium none; padding-top: 3px; background: green;"></input>
</form>
</div>
上面是代码，复制到自定义栏里就行了
⑦ 仿淘宝首页搜索框怎么做的
早期的搜索引擎是把因特网中的资源服务器的地址收集起来，由其提供的资源的类型不同而分成不同的目录，再一层层地进行分类。人们要找自己想要的信息可按他们的分类一层层进入，就能最后到达目的地，找到自己想要的信息。这其实是最原始的方式，只适用于因特网信息并不多的时候。随着因特网信息按几何式增长，出现了真正意义上的搜索引擎，这些搜索引擎知道网站上每一页的开始，随后搜索因特网上的所有超级链接，把代表超级链接的所有词汇放入一个数据库。这就是现在搜索引擎的原型
⑧ 淘宝搜索框怎么做，
需要调用淘宝的接口，自己是不能写搜索框的
⑨ 在淘宝搜索的时候，输入1-2个字，淘宝搜索框就会弹出下拉框，显示与你输入的词相关的搜索词，像这样：
正常，是因为你的手机清理过了。没有记录了，他就不知道怎么给你匹配了。用着用着就有了，他会根据你的习惯自动匹配的
⑩ 淘宝搜索框自定义代码
<!--
·1此代码默认尺寸200x30像素（文本框：170x30像素；提交按钮：30x30像素）;
·2代码仅为框架，可通过使用内联样式添加背景图片实现效果；
·3如需使用border属性添加边框，请勿删除之前的border样式，并且要减去相应的高宽数值
-->
<!--搜索代码-->
<formaction="#店铺搜索页链接"method="get"target="_blank"style="width:200px;height:30px;border:0;padding:0;outline:none;">
<!--搜索按钮-->
<inputname="search"type="submit"value=""style="width:30px;height:30px;background-color:#C9C9C9;border:0;padding:0;outline:none;cursor:pointer;float:right;">
<!--搜索按钮End-->
<!--文本输入-->
<inputname="keyword"type="text"value=""style="width:170px;height:30px;background-color:#E5E5E5;border:0;padding:0;outline:none;text-indent:5px;cursor:text;float:left;">
<!--文本输入End-->
</form>
<!--搜索代码End-->
回答中无法添加具体链接，代码中 “#店铺搜索页链接”即为打开店铺搜索页，地址栏内的地址链接，可只保留到search.htm位置
具体操作可读注释，更多问题可追问或私信
具体效果可搜索浏览 “盈兆电器专营店”
满意请随手 点赞 支持 (๑•̀ㅂ•́)و✧