先講一下標準版 與 拓展 版的區別...
標準版內容只能是750寬的圖片..
而拓展版呢可以達到950通欄的效果...
大家可以查看一下我的店鋪,
標準版達到全通欄效果.
以下我們分步來講解.
1、標準版是如何實現通欄效果....
標準版比之前的扶植版多了很多的自己定義欄.
自定義欄的作用就是可以用HTML代碼.實現你想要的效果
之前的扶植版只有一個自定義欄因此發揮不了什么作用.(PS:之前只有一個自定欄時我也把扶植版裝修成了標準版,現在我要把標準版設計成拓展版,希望淘寶不要生氣哦...)
所以當我升鉆后變成標準版就可以實現通欄的拓展版效果了.
我們點裝修店鋪./布局管理/
左邊點添加自定義欄/右邊也一樣添加自定義欄
這樣就變成如下圖形
這個個內容布局
就是用來做頂頂大名的通欄效果了...哈哈(通過HTML代碼實現)
頂貼 或旺旺
一下..
我在繼續寫,,,,,,,,,,,,,,放出通欄拓展版效果的首頁輪播代碼..........
那接剛才說的.分布好布局后...我們要開始操作右邊的大面積的自定義欄.
說白了這邊750寬的其實是沒什么作用的,只是為了頂起一個空空的區域.后面寫代碼會知道.
注:很多人所謂的標準版裝修成拓展版都只會鉆在這750上去做,把750寬的自定義和200寬的拼接在一起....美其名曰"拓展版"這樣的就會出現分斷,看上去很假..
下面我就介紹一下左邊200寬和右邊750寬的用法
重點在200寬中輸入950*400的輪播代碼(以后你就可以直接用950寬的圖片,而且是一張完整的哦.鄙視一下那些拼接起來的..哈哈,,無惡意的...)...然后用750寬的自定欄中輸入支撐代碼..
750中要輸入的支撐代碼為:
<TABLE border=0 cellSpacing=0 cellPadding=0 width=750 height=150>
<TBODY>
<TR>
<TD height=180> </TD></TR>
<TR>
<TD height=400 vAlign=top align=middle></TD></TR></TBODY></TABLE>
其中紅色字為圖持撐起來的圖片高度.我默認的是高400(因為我的輪播圖片是950*400的尺寸)
大家要注意你圖片多高就改紅色就可以了/(如:你的圖片是850*600.那紅色的地方就改成700左右,不可小于600)
好了,寫到這..有人頂了...繼續寫...
到了這個時候大家設計好自己的4幅950400的圖片.....當然高度400可以自己調節.你想設計成500或800高的都可以.
記得前面講過的...支撐代碼也要跟著調節....
4幅輪播圖,.記得分辨率要72就可以了.....
這樣可以快速顯示不至于卡住時只顯示空白的.
現在我來講解一下輪播代碼的實現,,,
為什么我們的200寬的自定義欄里可以實現950寬的輪播圖片呢?
代碼如下:(其中藍色為基礎代碼,意思就是必須要有的,然后紅色部分為輪播代碼,就是你們自己想要什么樣的輪播代碼就自己寫進去然后在改圖片地址就可以實現950的輪播了.不想創新的人就直接拷貝我這段代碼然后把代碼中的中文字部分改成你們的950圖片地址和圖片超鏈接地址就可以了,,,,,這個輪播是正常一上下翻頁的代碼(我這個圖片設計的高度是360的你們自己設計的圖片高度如果是別的高度也一樣要跟著改.))
<DIV class=duola>
<DIV class="J_TWidget scrollable" data-widget-type="Carousel" data-widget-config="{effect: scrolly,easing: easeOutStrong, steps:1,circular: true,prevBtnCls: prev, nextBtnCls: next,disableBtnCls: disable,autoplay: true}">
<DIV style="WIDTH: 950px; HEIGHT: 360px" class="slider-promo J_Slider J_TWidget" data-widget-config="{effect:fade,contentCls: lst-main, navCls: lst-trigger, activeTriggerCls: current}" data-widget-type="Slide" data-type="fade">
<ul class=lst-main>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品連接地址" target=_blank><img alt="" src="圖片地址1"></A></li>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品連接地址" target=_blank><img alt="" src="圖片地址2"></A></li>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品連接地址" target=_blank><img alt="" src="圖片地址3"></A></li>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品連接地址" target=_blank><img alt="" src="圖片地址4"></A></li>
</ul></DIV><li>
<ul></ul><DIV style="HEIGHT: 400px"></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV></li></DIV>
下面來講解一下原理...
其中:下面這段代碼是把950圖版跳出200寬的自定義欄:
<DIV class=duola>
<DIV class="J_TWidget scrollable" data-widget-type="Carousel" data-widget-config="{effect: scrolly,easing: easeOutStrong, steps:1,circular: true,prevBtnCls: prev, nextBtnCls: next,disableBtnCls: disable,autoplay: true}">
這里可以寫你想要的輪播代碼(這里可以寫很多樣式的輪播代碼.只要你想的輪播都可以寫進去.)
<ul></ul><DIV style="HEIGHT: 400px"></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV></li></DIV>
各位同學,,,,,不要只學不頂,,,這可不是好孩子.....
這次如果加精了...
后面還會放出更精彩的設計代碼....
肯定是店鋪裝修史上最OK的...............
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 標準版如何制作類似拓展版的通欄效果
