先講一下標(biāo)準(zhǔn)版 與 拓展 版的區(qū)別...
標(biāo)準(zhǔn)版內(nèi)容只能是750寬的圖片..
而拓展版呢可以達(dá)到950通欄的效果...
大家可以查看一下我的店鋪,
標(biāo)準(zhǔn)版達(dá)到全通欄效果.
以下我們分步來(lái)講解.
1、標(biāo)準(zhǔn)版是如何實(shí)現(xiàn)通欄效果....
標(biāo)準(zhǔn)版比之前的扶植版多了很多的自己定義欄.
自定義欄的作用就是可以用HTML代碼.實(shí)現(xiàn)你想要的效果
之前的扶植版只有一個(gè)自定義欄因此發(fā)揮不了什么作用.(PS:之前只有一個(gè)自定欄時(shí)我也把扶植版裝修成了標(biāo)準(zhǔn)版,現(xiàn)在我要把標(biāo)準(zhǔn)版設(shè)計(jì)成拓展版,希望淘寶不要生氣哦...)
所以當(dāng)我升鉆后變成標(biāo)準(zhǔn)版就可以實(shí)現(xiàn)通欄的拓展版效果了.
我們點(diǎn)裝修店鋪./布局管理/
左邊點(diǎn)添加自定義欄/右邊也一樣添加自定義欄
這樣就變成如下圖形
這個(gè)個(gè)內(nèi)容布局
就是用來(lái)做頂頂大名的通欄效果了...哈哈(通過(guò)HTML代碼實(shí)現(xiàn))
頂貼 或旺旺
一下..
我在繼續(xù)寫(xiě),,,,,,,,,,,,,,放出通欄拓展版效果的首頁(yè)輪播代碼..........
那接剛才說(shuō)的.分布好布局后...我們要開(kāi)始操作右邊的大面積的自定義欄.
說(shuō)白了這邊750寬的其實(shí)是沒(méi)什么作用的,只是為了頂起一個(gè)空空的區(qū)域.后面寫(xiě)代碼會(huì)知道.
注:很多人所謂的標(biāo)準(zhǔn)版裝修成拓展版都只會(huì)鉆在這750上去做,把750寬的自定義和200寬的拼接在一起....美其名曰"拓展版"這樣的就會(huì)出現(xiàn)分?jǐn)?看上去很假..
下面我就介紹一下左邊200寬和右邊750寬的用法
重點(diǎn)在200寬中輸入950*400的輪播代碼(以后你就可以直接用950寬的圖片,而且是一張完整的哦.鄙視一下那些拼接起來(lái)的..哈哈,,無(wú)惡意的...)...然后用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>
其中紅色字為圖持撐起來(lái)的圖片高度.我默認(rèn)的是高400(因?yàn)槲业妮啿D片是950*400的尺寸)
大家要注意你圖片多高就改紅色就可以了/(如:你的圖片是850*600.那紅色的地方就改成700左右,不可小于600)
好了,寫(xiě)到這..有人頂了...繼續(xù)寫(xiě)...
到了這個(gè)時(shí)候大家設(shè)計(jì)好自己的4幅950400的圖片.....當(dāng)然高度400可以自己調(diào)節(jié).你想設(shè)計(jì)成500或800高的都可以.
記得前面講過(guò)的...支撐代碼也要跟著調(diào)節(jié)....
4幅輪播圖,.記得分辨率要72就可以了.....
這樣可以快速顯示不至于卡住時(shí)只顯示空白的.
現(xiàn)在我來(lái)講解一下輪播代碼的實(shí)現(xiàn),,,
為什么我們的200寬的自定義欄里可以實(shí)現(xiàn)950寬的輪播圖片呢?
代碼如下:(其中藍(lán)色為基礎(chǔ)代碼,意思就是必須要有的,然后紅色部分為輪播代碼,就是你們自己想要什么樣的輪播代碼就自己寫(xiě)進(jìn)去然后在改圖片地址就可以實(shí)現(xiàn)950的輪播了.不想創(chuàng)新的人就直接拷貝我這段代碼然后把代碼中的中文字部分改成你們的950圖片地址和圖片超鏈接地址就可以了,,,,,這個(gè)輪播是正常一上下翻頁(yè)的代碼(我這個(gè)圖片設(shè)計(jì)的高度是360的你們自己設(shè)計(jì)的圖片高度如果是別的高度也一樣要跟著改.))
<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>
下面來(lái)講解一下原理...
其中:下面這段代碼是把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}">
這里可以寫(xiě)你想要的輪播代碼(這里可以寫(xiě)很多樣式的輪播代碼.只要你想的輪播都可以寫(xiě)進(jìn)去.)
<ul></ul><DIV style="HEIGHT: 400px"></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV></li></DIV>
各位同學(xué),,,,,不要只學(xué)不頂,,,這可不是好孩子.....
這次如果加精了...
后面還會(huì)放出更精彩的設(shè)計(jì)代碼....
肯定是店鋪裝修史上最OK的...............
樂(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)源： 標(biāo)準(zhǔn)版如何制作類(lèi)似拓展版的通欄效果
