标准版变拓展版真正通栏效果Word文档下载推荐.docx
《标准版变拓展版真正通栏效果Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《标准版变拓展版真正通栏效果Word文档下载推荐.docx（12页珍藏版）》请在冰豆网上搜索。
我们点装修店铺./布局管理/
左边点添加自定义栏/右边也一样添加自定义栏
这个内容布局
就是用来做顶顶大名的通栏效果了（通过HTML代码实现
分布好布局后...我们要开始操作右边的大面积的自定义栏.
说白了这边750宽的其实是没什么作用的,只是为了顶起一个空空的区域.后面写代码会知道.
下面我就介绍一下左边200宽和右边750宽的用法
重点在200宽中输入950*400的轮播代码.然后用750宽的自定栏中输入支撑代码..
750中要输入的支撑代码为:
<
TABLEborder=0cellSpacing=0cellPadding=0width=750height=150>
TBODY>
TR>
TDheight=180>
&
nbsp;
/TD>
/TR>
TDheight=400vAlign=topalign=middle>
/TBODY>
/TABLE>
其中红色字为图持撑起来的图片高度.我默认的是高400（因为我的轮播图片是950*400的尺寸）
现在我来讲解一下轮播代码的实现,,,
为什么我们的200宽的自定义栏里可以实现950宽的轮播图片呢?
代码如下
DIVclass=duola>
DIVclass="
J_TWidgetscrollable"
data-widget-type="
Carousel"
data-widget-config="
{'
effect'
:
'
scrolly'
'
easing'
easeOutStrong'
'
steps'
1,'
circular'
true,'
prevBtnCls'
prev'
nextBtnCls'
next'
disableBtnCls'
disable'
autoplay'
true}"
>
DIVstyle="
WIDTH:
950px;
HEIGHT:
360px"
class="
slider-promoJ_SliderJ_TWidget"
'
fade'
contentCls'
lst-main'
navCls'
lst-trigger'
activeTriggerCls'
current'
}"
Slide"
data-type="
fade"
ulclass=lst-main>
li>
Astyle="
href="
商品连接地址"
target=_blank>
imgalt="
"
src="
图片地址"
/A>
/li>
/DIV>
ulclass=ks-switchable-nav>
liclass=ks-active>
/ul>
ul>
HEIGHT:
400px"
DIV>
以下代码直接复制进去修改中文字的地方就可以了。
950*360通栏大图
代码如下：
/div>
divclass="
boxJ_TBoxtshop-pbsmtshop-pbsm-ssd10c"
data-spm=&
quot;
2000.129791838.4226878787.0&
shop-customno-border"
bd"
custom-area"
duola"
divstyle="
width:
950px;
float:
left;
height:
500px;
xfcx"
prev"
ahref="
http:
//www.ec-#no"
/a>
next"
scroller"
ks-switchable-content"
pstyle="
display:
block;
target="
_blank"
imgstyle="
360px;
alt="
图片地址950X360尺寸"
<
/p>
ulclass="
ks-switchable-nav"
liclass="
ks-active"
tableborder="
0"
cellspacing="
cellpadding="
width="
116"
height="
121"
tbody>
tr>
tdvalign="
center"
align="
middle"
100px;
图片地址100X100尺寸"
/td>
/tr>
/tbody>
/table>
下面放出950通栏的产品展示代码，可以放8个产品。
首先在左边轮播栏的下面新建一个自定义栏，在这个200的自定义栏里复制进去代码就可以了。
然后相应调节右边支撑栏的高度就可以了，切记，调节高度。
如下图只要多建一个左边的自定义栏就可以了，每个产品的图片尺寸为220*220尺寸。
同学们设计图片的时候要注意
具体的说明在代码中有中文的说明。
。
装修有风险，，操作需谨慎
复制到自定义栏后你可以点掉HTML形式，就可以看到效果，，，然后也可以直接编辑。
2000.129791838.4226878792.0&
boxtshop-pbsmtshop-pbsm-ssd10c"
shop-customno-border"
50px;
xing4608a"
950"
bgcolor="
#ffffff"
305"
tdstyle="
padding-top:
13px;
65"
valign="
top"
colspan="
4"
imgsrc="
这里放一个关于这8个产品的图片地址，图片尺寸950宽47高的产品展示刊头图片，记得一定是链接地址哦。
47"
237"
230"
308"
tdheight="
3"
po"
imgborder="
220"
13"
104"
14"
<
112"
20"
立即购买连接地址"
立即购买小图标 尺寸90*20"
br>
left"
strongstyle="
color:
#600000;
font-size:
14pt;
0元<
/strong>
45"
产品文字介绍...<
span>
0元<
/span>
产品文字介绍..<
产品文字介绍..<
heigh
升级会员 