淘寶店招全屏代碼

店鋪裝修其中比較關(guān)鍵的應(yīng)該算是店招和導(dǎo)航了吧。米色思索了半天，也沒(méi)確定好該如何對(duì)這篇教程的內(nèi)容分塊。為了方便就按照終端劃分吧。

一：PC電腦端

店招：默認(rèn)尺寸為950px*120px 一般我們會(huì)使用自定義店招，注意一般情況下，可點(diǎn)擊的內(nèi)容部分，最好放自定義模塊里面，因?yàn)槌^(guò)950范圍 不能點(diǎn)擊，用其他方法去掉溢出隱藏。

店招導(dǎo)航背景：如果是專業(yè)版，智能版可直接在裝修頁(yè)面頁(yè)頭設(shè)置里面添加背景圖。如果是基礎(chǔ)版店鋪，只能通過(guò)固定背景或者導(dǎo)航條背景來(lái)實(shí)現(xiàn)(這個(gè)教程我也發(fā)過(guò)，關(guān)注米色查看)

導(dǎo)航：默認(rèn)尺寸950px*30px 很多人不喜歡用默認(rèn)導(dǎo)航，而選擇自定義導(dǎo)航。其實(shí)如果會(huì)代碼，使用默認(rèn)導(dǎo)航條修改成你想要的效果更好。因?yàn)樘詫毮J(rèn)是允許我們?cè)趯?dǎo)航模塊里面編寫(xiě)CSS代碼來(lái)修改導(dǎo)航條樣式效果。用默認(rèn)導(dǎo)航條做的導(dǎo)航效果更炫酷。

二：手機(jī)移動(dòng)端

店招：沒(méi)什么好說(shuō)的，在裝修后臺(tái)，我們只能替換店鋪店招背景圖，建議尺寸750px*254px

因?yàn)槭謾C(jī)端太過(guò)簡(jiǎn)單，這里就不啰嗦了。重點(diǎn)說(shuō)下電腦端店招和自定義導(dǎo)航的事情。

一：店招

默認(rèn)的尺寸，只是淘寶建議的尺寸(寬度為950像素，高度建議不超過(guò)120像素，否則導(dǎo)航顯示可能異常)

很多朋友經(jīng)常問(wèn)，怎么在店鋪實(shí)現(xiàn)全屏店招。其實(shí)這里的全屏需要分2種情況：

店招950px以外部分可以點(diǎn)擊。(這個(gè)默認(rèn)淘寶是不允許的，除非購(gòu)買模板或者用其他破解方法實(shí)現(xiàn))

店招950px范圍以內(nèi)可以點(diǎn)擊(一般我們主要是做這種)

其實(shí)全屏店招很簡(jiǎn)單，比如你設(shè)計(jì)好了 一個(gè)店招效果。你把不需要變動(dòng)或者點(diǎn)擊的部分，單獨(dú)存儲(chǔ)為頁(yè)頭背景，店招+導(dǎo)航(一般1920px*150px)

然后把需要點(diǎn)擊和變動(dòng)的部分，再單獨(dú)做出來(lái)，放自定義店招里面。

原理跟PS圖層一樣，背景層 上面是店招內(nèi)容層。一上一下，兩層。

注意店鋪店招和導(dǎo)航的尺寸不是固定就那么大，你可以隨意設(shè)置高度，甚至是你只用店招模塊或者導(dǎo)航模塊都可以。

二：店鋪?zhàn)远x導(dǎo)航

這里說(shuō)的自定義導(dǎo)航是相對(duì)于默認(rèn)導(dǎo)航來(lái)說(shuō)的。因?yàn)橛行┤瞬欢a，修改不了默認(rèn)導(dǎo)航，所以只能通過(guò)自定義導(dǎo)航來(lái)實(shí)現(xiàn)效果了。(注意：自定義導(dǎo)航代碼，只能放店招模塊里面)

關(guān)于自定義導(dǎo)航有下面幾個(gè)問(wèn)題：

1-店鋪默認(rèn)情況下，店招里面的內(nèi)容，如果超過(guò)店招模塊的范圍會(huì)自動(dòng)隱藏不顯示

換句話說(shuō)就是你自定義做好的導(dǎo)航效果，放店招模塊后，超過(guò)950px區(qū)域就會(huì)隱藏不顯示。

自定義導(dǎo)航，一般包含2部分

1-導(dǎo)航條（如果不懂代碼編寫(xiě)的話，可以使用PS+DW來(lái)制作導(dǎo)航條）

2-鼠標(biāo)經(jīng)過(guò)彈出的二級(jí)分類

要想實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條上面的分類彈出二級(jí)分類，我們就需要用到淘寶WIDGET組件，彈出層。

首先我們來(lái)一個(gè)簡(jiǎn)單的彈出層代碼來(lái)試試效果

<div class="miseu" style="height:120px; width:200px;">自定義導(dǎo)航</div>

<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{

'trigger':'.miseu',

'align':{

'node':'.miseu',

'offset':[0,0],

'points':['bc','tc']

}

}">

<div style="background-color:#0CF; height: 200px; width: 190px;">

被導(dǎo)航彈出了

</div>

</div>

當(dāng)我們把上面代碼全部放進(jìn)自定義店招，源碼模式下的話會(huì)發(fā)現(xiàn)，彈出的內(nèi)容，沒(méi)有顯示，為什么呢?因?yàn)閺棾龅膬?nèi)容在店招的950px區(qū)域外，所以隱藏起來(lái)了看不到。

那么怎么才能顯示出來(lái)呢？

我們只需要做一個(gè)簡(jiǎn)單的操作即可，就是把上面【自定義導(dǎo)航】代碼放店招自定義里面。將彈出內(nèi)容部分代碼，放導(dǎo)航下面的另一個(gè)自定義模塊里面。就會(huì)發(fā)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航彈出的內(nèi)容就顯示了。

但是需要注意，盡量不要把彈出內(nèi)容部分的代碼，單獨(dú)放到一個(gè)自定義模塊里面，不然到時(shí)候會(huì)發(fā)現(xiàn)自定義模塊消失看不到了，怎么解決呢?

很簡(jiǎn)單，把彈出的代碼，放到一個(gè)已經(jīng)有內(nèi)容的自定義模塊，源碼模式上面就可以

如果需要其他頁(yè)面也彈出來(lái)，就需要在其他頁(yè)面再把彈出內(nèi)容代碼放進(jìn)去自定義模塊

2-自定義店招的優(yōu)劣對(duì)比

【店鋪默認(rèn)導(dǎo)航】：

優(yōu)勢(shì)：可以通過(guò)CSS代碼，將導(dǎo)航條修改成任意你想要的效果。并且還能做CSS特效。還不需要那么麻煩手動(dòng)添加分類，自動(dòng)就會(huì)顯示店鋪分類。并且所有頁(yè)面都可以彈出來(lái)。

劣勢(shì)：需要一定代碼基礎(chǔ)，才能修改導(dǎo)航實(shí)現(xiàn)想要的效果

【自定義導(dǎo)航】：

優(yōu)勢(shì)：導(dǎo)航條自定義成都更高，比如想在導(dǎo)航條上面做一個(gè)搜索框等。相對(duì)修改默認(rèn)導(dǎo)航，某種意義說(shuō)這個(gè)對(duì)代碼要求更低點(diǎn)

劣勢(shì)：沒(méi)辦法所有頁(yè)面都彈出。(不過(guò)也不需要擔(dān)心，進(jìn)入裝修頁(yè)面，將彈出部分的代碼，放到詳情頁(yè)的一個(gè)自定義模塊里面即可)。而且店鋪沒(méi)有CSS權(quán)限的話，很難實(shí)現(xiàn)CSS特效。

至于是想用默認(rèn)導(dǎo)航還是自定義導(dǎo)航，看個(gè)人情況選擇即可。

淘寶首頁(yè)1920全屏代碼

輪播尺寸：1920px*650px | 輪播數(shù)量：3張。淘寶店鋪基礎(chǔ)版代碼如下：
<div style=\”height:640px;\”>
<div class=\”footer-more-trigger mallNav-others sn-simple-logo\” style=\”width:1920px;height:650px;border:0;padding:0;right:auto;z-index:1;top:auto;left:50%;\”>
<div class=\”footer-more-trigger mallNav-others sn-simple-logo\” style=\”width:1920px;height:650px;border:0;padding:0;right:auto;z-index:1;top:auto;left:-1060px;\”>
<div class=\”J_TWidget\” data-widget-type=\”Carousel\” data-widget-config=\”{\’nextBtnCls\’:\’next1\’,\’duration\’:1,\’activeTriggerCls\’:\’hidden\’,\’easing\’:\’easeOutStrong\’,\’effect\’:\’scrollx\’,\’interval\’:4,\’navCls\’:\’nav_pixel1\’,\’contentCls\’:\’content_pixel2\’,\’prevBtnCls\’:\’prev1\’,\’autoplay\’:true}\” style=\”height:650px;overflow:hidden;position:relative;\”>
<ul class=\”content_pixel2\”><li style=\”width:1920px;height:650px;display:block;float:left;\”>
<a target=\”_blank\” href=\”#\” style=\”width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2LLB5p.lnpuFjSZFjXXXTaVXa_!!860326432.jpg);\”> </a></li>
<li style=\”width:1920px;height:650px;display:block;float:left;\”>
<a target=\”_blank\” href=\”#\” style=\”width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2yLFKpYBnpuFjSZFGXXX51pXa_!!860326432.jpg);\”> </a></li>
<li style=\”width:1920px;height:650px;display:block;float:left;\”>
<a target=\”_blank\” href=\”#\” style=\”width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i2/860326432/TB2DUSgp5lnpuFjSZFgXXbi7FXa_!!860326432.jpg);\”> </a></li></ul>
<ul class=\”footer-more-trigger mallNav-others sn-simple-logo\” style=\”width:100%;height:20px;z-index:98;padding:0;border:0;right:auto;top:auto;left:auto;margin-left:700px;bottom:18px;\”>
<li style=\”width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;\”>輕便緩震跑鞋</li>
<li style=\”width:180px;

樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 淘寶店招全屏代碼,淘寶首頁(yè)1920全屏代碼