公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝网店装修教程

标准版店铺装修如何打造通栏效果

2015-08-04 05:08:11

        店铺装修的版本有几种,有些店家使用的是标准版,如何装修店铺,打造出像拓展版一样的通栏效果呢?唯艺装修平台整理了一些资料,大家一起来看一下。


        我们要知道,标准版只能放750宽的图片,拓展版是950宽,这个是两个版本的区别。标准版有不少的自定义栏,可以用HTML代码,设计自己想要的效果。首先,我们点击“装修店铺”---“布局管理”,在左右两边添加自定义栏。做好布局后,先操作右边的自定义栏。

        接下来,我们看看左边200宽和右边750宽如何用。

         我们要在200宽中输入950*400的轮播代码,然后在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>

        那么,如何在200宽的自定义栏里实现950宽的轮播图片呢?代码如下:

<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>

          本文出自唯艺网店装修平台(www.weiyi5.cc,转载请注明出处!


0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 游戏充值 瀑布流 虚拟充值网店模板

    游戏充值 瀑布流 虚拟充值网店模板

    人气:39788
  • 双十二 促销大红 现代灯艺淘宝模板

    双十二 促销大红 现代灯艺淘宝模板

    人气:0
  •  型男健美 素雅青灰 型男健美淘宝模板

    型男健美 素雅青灰 型男健美淘宝模板

    人气:0
  • 时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    人气:56789
  • 至简大牌 全屏轮播 女装服饰淘宝模板

    至简大牌 全屏轮播 女装服饰淘宝模板

    人气:40580
  • 香水珠宝 高贵雅致 化妆健美淘宝模板

    香水珠宝 高贵雅致 化妆健美淘宝模板

    人气:38793
  • 淡雅浅黄 简约风尚 女装女鞋淘宝模板

    淡雅浅黄 简约风尚 女装女鞋淘宝模板

    人气:48805
  • 清新优雅 简约背景 内衣服饰淘宝模版

    清新优雅 简约背景 内衣服饰淘宝模版

    人气:1