淘寶的寬屏海報(bào)如何實(shí)現(xiàn)的？

很多新手賣家對(duì)此都是疑問比較多的，找不到寬屏海報(bào)的代碼，找到了不會(huì)使用代碼？

今天我們就來把代碼以及安裝教程分享出來：

1、1920寬屏效果（代碼）

<div data-widget-type="Tabs" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'piao712634383fu'}" class="J_TWidget">
  <div class="piao712634383fu" style="height:490px;">
    <div data-widget-type="Carousel" data-widget-config="{
            'contentCls': 'slide-ziyoou712634383content',
       'triggerCls': 'slide-ziyoou712634383triggers',
      'navCls': 'slide-ziyoou712634383triggers',
     'triggerType': 'mouse',
  'effect': 'scrollx',
 'prevBtnCls':'prev',
 'nextBtnCls':'next',
   'steps': 1,
  'autoplay': true,
 'viewSize':[1920],
            'circular': true

        }" class="J_TWidget ks-switchable-panel-internal552" style="z-index: 9; padding: 0px; margin: 0px; width: 1920px; top: 0px; left: -485px; display: block; opacity: 1; position: absolute;" role="tabpanel" aria-hidden="false" aria-labelledby="ks-switchable555">
      <div class="first712634383trigger" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;overflow:hidden;padding-top:0px;">
   
       
 <a target="_blank" href="http://ziyoou.taobao.com"><img src="http://img04.taobaocdn.com/imgextra/i4/1055778042/TB2mzb3aFXXXXagXpXXXXXXXXXX-1055778042.jpg" alt="ziyoou" /></a>

       
      </div>
      <ul class="slide-ziyoou712634383triggers">
      </ul>
    </div>
  </div>
  <ul class="ks-switchable-nav" role="tablist">
    <li class="ks-active ks-switchable-trigger-internal551" role="tab" tabindex="0" id="ks-switchable555" style="font-size:0px;">1</li>
  </ul>
</div>

2、1920寬屏自定義（代碼）

<div data-widget-type="Tabs" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'piao712634383fu'}" class="J_TWidget">
  <div class="piao712634383fu" style="height:394px;">
    <div data-widget-type="Carousel" data-widget-config="{
            'contentCls': 'slide-ziyoou712634383content',
       'triggerCls': 'slide-ziyoou712634383triggers',
      'navCls': 'slide-ziyoou712634383triggers',
     'triggerType': 'mouse',
  'effect': 'scrollx',
 'prevBtnCls':'prev',
 'nextBtnCls':'next',
   'steps': 1,
  'autoplay': true,
 'viewSize':[1920],
            'circular': true

        }" class="J_TWidget ks-switchable-panel-internal552" style="z-index: 9; padding: 0px; margin: 0px; width: 1920px; top: 0px; left: -485px; display: block; opacity: 1; position: absolute;" role="tabpanel" aria-hidden="false" aria-labelledby="ks-switchable555">
      <div class="first712634383trigger" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:394px;overflow:hidden;padding-top:0px;">
   
       

【把你的內(nèi)容放到這里面替換這些漢字,模塊的寬度一定是1920的寬，海報(bào)/表格/圖片熱區(qū)都可以，高度可以自定，但是高度改變也要跟著改變兩個(gè)參數(shù)的高度值，只限C店首頁使用】

       
      </div>
      <ul class="slide-ziyoou712634383triggers">
      </ul>
    </div>
  </div>
  <ul class="ks-switchable-nav" role="tablist">
    <li class="ks-active ks-switchable-trigger-internal551" role="tab" tabindex="0" id="ks-switchable555" style="font-size:0px;">1</li>
  </ul>
</div>

3、測試圖

以上是我們今天制作首頁寬屏海報(bào)要用到的代碼以及圖片：

第一個(gè)可以把代碼全選復(fù)制到你的淘寶首頁自定義里面，然后預(yù)覽發(fā)布看下效果。【最好使用火狐/谷歌瀏覽器。還有最好關(guān)掉殺毒軟件】

第二個(gè)代碼其實(shí)是一樣的，只是這里面寫了文字說明，就是把你的海報(bào)或者表格代碼或者圖片熱區(qū)復(fù)制到這里面。

我默認(rèn)發(fā)你的圖片尺寸大小為：1920*500PX的全屏海報(bào)圖片，如果你按這個(gè)尺寸做圖，就直接可以使用了，如果你的高度改變就看下面的解說：

a.第一個(gè)490紅色下劃線，這個(gè)490就是模塊的總高度減去10PX像素，可以改成減去15或減去20也就是485或480看下效果。這里主要是控制空白間距。

b.第二個(gè)500PX是你整個(gè)模塊的高度，如我下面的海報(bào)是500所以改成500。

c.第三塊綠色區(qū)就是你的內(nèi)容，如海報(bào)，表格代碼，圖片熱區(qū),寬度記得是1920PX，高度是500的海報(bào)，如果高度改變那上面兩個(gè)高度參數(shù)也跟著改一下。

如果寬度也要改變的話請(qǐng)看下面的圖解說明：

a.三個(gè)1920下劃線改成你的海報(bào)或格子模塊的寬度。

b.藍(lán)色地方請(qǐng)注意：藍(lán)色的地方數(shù)字等于=(模塊寬度-950)/2

如：（上面我的海報(bào)是1920寬，減去C店默認(rèn)通欄寬度950）除以2等于485px,最后就是：（1920-950）/2=485。

相關(guān)教程：最新旺鋪?zhàn)远x全屏通欄海報(bào)制作教程