先讲一下标准版 与 拓展 版的区别...
标准版内容只能是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幅950X400的图片.....当然高度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="" class='lazyload' src='/images/noimg.jpg' data-original="图片地址1"></A></li>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品连接地址" target=_blank><img alt="" class='lazyload' src='/images/noimg.jpg' data-original="图片地址2"></A></li>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品连接地址" target=_blank><img alt="" class='lazyload' src='/images/noimg.jpg' data-original="图片地址3"></A></li>
<li><A style="WIDTH: 950px; HEIGHT: 360px" href="商品连接地址" target=_blank><img alt="" class='lazyload' src='/images/noimg.jpg' data-original="图片地址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的..............
本文整理于互联网，如有侵权，请联系email：kf@53shop.com 进行删除处理。
