淘寶搜索框架
下載一個非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位置
具體操作可讀注釋,更多問題可追問或私信
具體效果可搜索瀏覽 「盈兆電器專營店」
滿意請隨手 點贊 支持 (๑•̀ㅂ•́)و✧