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

如何设置标签左右滚动的促销模板

2015-03-27 01:42:09

       从宝贝主图视频的推出开始,在淘宝店铺装修中,二维静态的设计已经无法让卖家们抢夺客户了。3D动态成了网店装修市场中的尤物。制作3D动态界面对于许多卖家朋友来说十分困难;也并不是所有界面都要换成3D动态才能够在众多商家中脱颖而出。合理的动态结合才能够突出重点,给买家一个购物方向。

       促销板块就是其中一个需要被强调的模块。利用3D动态设计才能够有力地吸引买家进入促销区进行购物。怎样设计促销区呢?对于许多卖家朋友们来说,在店铺装修中无非就是模仿一些自己认为好的设计,毕竟自己不是设计专业户。

       百度联盟广告标签云就是一个很好的促销参考模板。每一个标签下可以设置四个宝贝,当鼠标划过时宝贝左右切换。界面简洁大方。如果把这样的效果做成淘宝店铺的促销界面,就能摇身变成装修界的“高富帅”。

       唯艺温馨提示:以下代码中使用中文的地方可以相应地根据自身需求做出调整。此代码为高级代码,适用于旺铺专业版店铺。




标签左右白金代码


<div style="height:350px;color:#1b1b1b;font-family:arial;text-align:center" class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'navCls':'sg-nav','contentCls':'sg-content','steps':1,'prevBtnCls': 'prev','nextBtnCls': 'next','disableBtnCls': 'disable','circular':true,'effect':'scrollx','easing':'easeOutStrong','duration':1.0,'interval':'4','autoplay':false}"><ul class="J_TWidget sg-nav" style="height:40px;line-height:40px;font-size:0;margin-bottom:10px;overflow:hidden;" data-widget-type="Accordion" data-widget-config="{'triggerCls':'tab-panel','panelCls':'tab-panel-go','triggerType':'mouse'}" ><li class="tab-panel" style="outline:none;width:186px;height:40px;font-size:14px;display:inline-block;*zoom:1;*display:inline;color:#FFF;margin:0 2px; cursor:pointer;overflow:hidden"><span class="tab-panel-go" style="display:block;width:180px;background:#2ea6f1;height:40px;padding:0 10px;overflow:hidden;">第一个标签名称</span><span style="display:block;width:180px;background:#071e8e;height:40px;padding:0 10px;overflow:hidden;"> 第一个标签名称</span></li><li class="tab-panel" style="outline:none;width:186px;height:40px;font-size:14px;display:inline-block;*zoom:1;*display:inline;color:#FFF;margin:0 2px; cursor:pointer;overflow:hidden"><span class="tab-panel-go" style="display:none;width:180px;background:#2ea6f1;height:40px;padding:0 10px;overflow:hidden;"> 第二个标签名称</span><span style="display:block;width:180px;background:#071e8e;height:40px;padding:0 10px;overflow:hidden;"> 第二个标签名称</span></li><li class="tab-panel" style="outline:none;width:186px;height:40px;font-size:14px;display:inline-block;*zoom:1;*display:inline;color:#FFF;margin:0 2px; cursor:pointer;overflow:hidden"><span class="tab-panel-go" style="display:none;width:180px;background:#2ea6f1;height:40px;padding:0 10px;overflow:hidden;"> 第三个标签名称</span><span style="display:block;width:180px;background:#071e8e;height:40px;padding:0 10px;overflow:hidden;"> 第三个标签名称</span></li><li class="tab-panel" style="outline:none;width:186px;height:40px;font-size:14px;display:inline-block;*zoom:1;*display:inline;color:#FFF;margin:0 2px; cursor:pointer;overflow:hidden"><span class="tab-panel-go" style="display:none;width:180px;background:#2ea6f1;height:40px;padding:0 10px;overflow:hidden;"> 第四个标签名称</span><span style="display:block;width:180px;background:#071e8e;height:40px;padding:0 10px;overflow:hidden;"> 第四个标签名称</span></li><li class="tab-panel" style="outline:none;width:186px;height:40px;font-size:14px;display:inline-block;*zoom:1;*display:inline;color:#FFF;margin:0 2px; cursor:pointer;overflow:hidden"><span class="tab-panel-go" style="display:none;width:180px;background:#2ea6f1;height:40px;padding:0 10px;overflow:hidden;"> 第五个标签名称</span><span style="display:block;width:180px;background:#071e8e;height:40px;padding:0 10px;overflow:hidden;"> 第五个标签名称</span></li></ul><div style="overflow:hidden;height:350px"><div class="sg-content"> <ul style="width:950px;overflow:hidden;"> <li style="float:left;width:230px;margin:0px 10px 0 0;overflow:hidden"><a style="display:block;overflow:hidden;width:228px;height:228px;background:#FFF url(http://img01.taobaocdn.com/bao/uploaded/i1/14322024077293692/T1eTJfFoxgXXXXXXXX_!!0-item_pic.jpg_210x210.jpg) no-repeat center center; border:1px solid #ddd" href="促销区的宝贝链接" target="_blank"></a><div style="height:20px;line-height:20px;margin-top:10px"><span > <b style="color:#525252;font-size:18px;">&yen;99.00</b></span></div><a style="margin-top:8px;color:#130014;display:block;height:32px;line-height:16px;overflow:hidden" href="促销区的宝贝链接" target="_blank">促销区的宝贝题目</a></li><li style="float:left;width:230px;margin:0px 10px 0 0;overflow:hidden"><a style="display:block;overflow:hidden;width:228px;height:228px;background:#FFF url(http://img02.taobaocdn.com/bao/uploaded/i2/T1vmWrFj4hXXXXXXXX_!!0-item_pic.jpg_210x210.jpg) no-repeat center center; border:1px solid #ddd" href="促销区的宝贝链接" target="_blank"></a><div style="height:20px;line-height:20px;margin-top:10px"><span > <b style="color:#525252;font-size:18px;">&yen;30.00</b></span></div><a style="margin-top:8px;color:#130014;display:block;height:32px;line-height:16px;overflow:hidden" href="促销区的宝贝链接" target="_blank">促销区的宝贝题目-> B137-1</a></li><li style="float:left;width:230px;margin:0px 10px 0 0;overflow:hidden"><a style="display:block;overflow:hidden;width:228px;height:228px;background:#FFF url(http://img01.taobaocdn.com/bao/uploaded/i1/T1yzaGFkxdXXXXXXXX_!!0-item_pic.jpg_210x210.jpg) no-repeat center center; border:1px solid #ddd" href="促销区的宝贝链接" target="_blank"></a><div style="height:20px;line-height:20px;margin-top:10px"><span > <b style="color:#525252;font-size:18px;">&yen;30.00</b></span></div><a style="margin-top:8px;color:#130014;display:block;height:32px;line-height:16px;overflow:hidden" href="促销区的宝贝链接" target="_blank">促销区的宝贝题目-> B127-1</a></li><li style="float:left;width:230px;margin:0px 0 0 0;overflow:hidden"><a style="display:block;overflow:hidden;width:228px;height:228px;background:#FFF url(http://img02.taobaocdn.com/bao/uploaded/i2/T1WdmGFjVdXXXXXXXX_!!0-item_pic.jpg_210x210.jpg) no-repeat center center; border:1px solid #ddd" href="促销区的宝贝链接" target="_blank"></a><div style="height:20px;line-height:20px;margin-top:10px"><span > <b style="color:#525252;font-size:18px;">&yen;30.00</b></span></div><a style="margin-top:8px;color:#130014;display:block;height:32px;line-height:16px;overflow:hidden" href="促销区的宝贝链接" target="_blank">促销区的宝贝题目-> B128-1</a></li><li style="float:left;width:230px;margin:10px 10px 0 0;overflow:hidden"><a style="display:block;overflow:hidden;width:228px;height:228px;background:#FFF url(http://img04.taobaocdn.com/bao/uploaded/i4/T1AdOIFblbXXXXXXXX_!!0-item_pic.jpg_210x210.jpg) no-repeat center center; border:1px solid #ddd" href="促销区的宝贝链接" target="_blank"></a><div style="height:20px;line-height:20px;margin-top:10px"><span > <b style="color:#525252;font-size:18px;">&yen;30.00</b></span></div><a style="margin-top:8px;color:#130014;display:block;height:32px;line-height:16px;overflow:hidden" href="促销区的宝贝链接" target="_blank">促销区的宝贝题目-> B140-2</a></li><li style="float:left;width:230px;margin:10px 10px 0 0;overflow:hidden"><a style="display:block;overflow:hidden;width:228px;height:228px;background:#FFF url(http://img01.taobaocdn.com/bao/uploaded/i1/T1_SaOFh0bXXXXXXXX_!!0-item_pic.jpg_210x210.jpg) no-repeat center center; border:1px solid #ddd" href="促销区的宝贝链接" target="_blank"></a>

复制粘贴该高级代码到卖家中心的模块编辑区内,就可以实现标签自动左右滚动了。复制粘贴高级代码简单便捷,但是出来的效果却是非一般,瞬间高大上了许多。在设计方面,我们可以多参考参考像百度,新浪还有淘宝、京东这样的网络大咖,有许多新兴的装修大部分都是从它们那里发布的。唯艺也会及时地整理出相应的代码供卖家朋友们使用。


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

0

相关教程

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

  • 潮流复古  极致简约  个性服饰淘宝模板

    潮流复古 极致简约 个性服饰淘宝模板

    人气:0
  • 英伦雅致 潮流鞋靴 精品鞋包网店模板

    英伦雅致 潮流鞋靴 精品鞋包网店模板

    人气:57481
  • 游戏充值 瀑布流 虚拟充值网店模板

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

    人气:39788
  • 春天衣橱 精品酷黑 潮流男装淘宝模板

    春天衣橱 精品酷黑 潮流男装淘宝模板

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

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

    人气:40233
  • 时尚女鞋 米色暖黄 女鞋精品淘宝模板

    时尚女鞋 米色暖黄 女鞋精品淘宝模板

    人气:31597
  • 大牌简约 大气背景 珠宝配饰网店模板

    大牌简约 大气背景 珠宝配饰网店模板

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

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

    人气:38793