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

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

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

相关教程

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

  • 绚丽欧美 高端深蓝 母婴用品淘宝模板

    绚丽欧美 高端深蓝 母婴用品淘宝模板

    人气:38794
  • 中国风 佛缘手珠 饰品珠宝淘宝模板

    中国风 佛缘手珠 饰品珠宝淘宝模板

    人气:30549
  • 活力欧美 帅气男装 服装配件淘宝模板

    活力欧美 帅气男装 服装配件淘宝模板

    人气:40233
  • 奢华香包 大图模块 珠宝鞋靴淘宝模版

    奢华香包 大图模块 珠宝鞋靴淘宝模版

    人气:0
  • 双十一 淘宝活动促销模板 潮流女装

    双十一 淘宝活动促销模板 潮流女装

    人气:33016
  • 多彩数码 科技蓝调 手机数码网店模板

    多彩数码 科技蓝调 手机数码网店模板

    人气:46577
  • 旅行眼镜 炫酷欧美 服装配件网店模板

    旅行眼镜 炫酷欧美 服装配件网店模板

    人气:43216
  • 复古欧美 胶片暗青 创意灯饰淘宝模板

    复古欧美 胶片暗青 创意灯饰淘宝模板

    人气:1