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

高级抖动分类模板装修免费代码

2015-03-28 04:23:47

店铺装修是一件费心的事,特别是要装修出高级特效的模块。一般情况下,卖家会把分类好的宝贝逐个列举出来。这样的分类不能说不好,最起码的能够做到条理有序。但是这样的分类并不能够突出爆款,不能够很好地给消费者一个购物的导向。现在唯艺就给大家提供一个白金版分类模板代码。只要复制粘贴就可以了。

特效:模板左侧为店铺分类。主提由5个版块组成。鼠标放上后,板块会向右侧展开。右侧模板展示大图片,具有轮播和抖动的效果。该模板适用于旺铺专业版店铺。



高级抖动分类模板代码


<div style=" width:950px; overflow:hidden;zoom:1;font-family:微软雅黑;"><div class="J_TWidget scroller-nav"data-widget-type="Accordion" data-widget-config="{'triggerCls':'tab-panel','panelCls':'tab-panel-go','triggerType':'mouse'}"style=" float:left;width:190px; overflow:hidden; background:#e1e5dc; height:420px;"> <dl class="cats_mk8yr1 tab-panel" style=" height:106px;display:block;overflow:hidden;outline:none;"><span class="tab-panel-go cc_3g1p4"style="background:#408742;display:block;width:190px;height:106px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#FFF;text-decoration:none;" href="http://shop59633421.taobao.com/category-698177780.htm" target="_blank">350模板在线试用</a> </dt> <dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#FFF;" href="http://shop59633421.taobao.com/category-904530327.htm" target="_blank">4月10日上新</a></dd><dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#FFF;" href="http://shop59633421.taobao.com/category-904537935.htm" target="_blank">4月11日上新</a></dd><dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#FFF;" href="http://shop59633421.taobao.com/category-904537936.htm" target="_blank">4月12日上新</a></dd><dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#FFF;" href="http://shop59633421.taobao.com/category-904537937.htm" target="_blank">4月13日上新</a></dd></span><span style="background:#e1e5dc;display:block;?>;width:190px;height:106px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#666;display:inline-block;width:100%;border-bottom:1px dotted #c2d3ae;" href="http://shop59633421.taobao.com/category-698177780.htm" target="_blank">350模板在线试用</a> </dt> <dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#666;" href="http://shop59633421.taobao.com/category-904530327.htm" target="_blank">4月10日上新</a></dd><dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#666;" href="http://shop59633421.taobao.com/category-904537935.htm" target="_blank">4月11日上新</a></dd><dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#666;" href="http://shop59633421.taobao.com/category-904537936.htm" target="_blank">4月12日上新</a></dd><dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#666;" href="http://shop59633421.taobao.com/category-904537937.htm" target="_blank">4月13日上新</a></dd></span><!-- 弹出 star --> <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.cats_mk8yr1','align':{'node':'.cats_mk8yr1','offset':[0,0],'points':['cr','cl']}}" style=""><div style="overflow:hidden;line-height:106px;zoom:1;width:500px;height:106px;background:#408742;opacity:0.8;"><ul> <li style="float:left;;margin:0 10px;"><a href="http://shop59633421.taobao.com/category-904537938.htm" target="_blank" style=" color:#FFF;display:inline-block;white-space:nowrap;">4月14日上新</a></li><li style="float:left;;margin:0 10px;"><a href="http://shop59633421.taobao.com/category-904537939.htm" target="_blank" style=" color:#FFF;display:inline-block;white-space:nowrap;">4月15日上新</a></li></ul></div></div><!-- 弹出 end --> </dl><dl class="cats_2MSBT2 tab-panel" style=" height:105px;display:block;overflow:hidden;outline:none;"><span class="tab-panel-go cc_3g1p4"style="background:#408742;display:none;width:190px;height:105px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#FFF;text-decoration:none;" href="http://shop59633421.taobao.com/category-698177783.htm" target="_blank">通用模板</a> </dt> <dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#FFF;" href="http://shop59633421.taobao.com/category-904530328.htm" target="_blank">男装模板</a></dd></span><span style="background:#e1e5dc;display:block;?>;width:190px;height:105px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#666;display:inline-block;width:100%;border-bottom:1px dotted #c2d3ae;" href="http://shop59633421.taobao.com/category-698177783.htm" target="_blank">通用模板</a> </dt> <dd style=" float:left;height:16px;line-height:16px;padding:3px 5px 0 15px;"><a style="white-space:nowrap;display:inline-block;color:#666;" href="http://shop59633421.taobao.com/category-904530328.htm" target="_blank">男装模板</a></dd></span><!-- 弹出 star --> </dl><dl class="cats_pPlUJ3 tab-panel" style=" height:105px;display:block;overflow:hidden;outline:none;"><span class="tab-panel-go cc_3g1p4"style="background:#408742;display:none;width:190px;height:105px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#FFF;text-decoration:none;" href="http://shop59633421.taobao.com/category-830177571.htm" target="_blank">精品鞋包</a> </dt> </span><span style="background:#e1e5dc;display:block;?>;width:190px;height:105px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#666;display:inline-block;width:100%;border-bottom:1px dotted #c2d3ae;" href="http://shop59633421.taobao.com/category-830177571.htm" target="_blank">精品鞋包</a> </dt> </span><!-- 弹出 star --> </dl><dl class="cats_k37qL4 tab-panel" style=" height:105px;display:block;overflow:hidden;outline:none;"><span class="tab-panel-go cc_3g1p4"style="background:#408742;display:none;width:190px;height:105px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#FFF;text-decoration:none;" href="http://shop59633421.taobao.com/category-830177572.htm" target="_blank">化妆健美</a> </dt> </span><span style="background:#e1e5dc;display:block;?>;width:190px;height:105px;"> <dt style=" font-weight:700;height:22px;line-height:22px;padding:10px 15px 0px;"> <a style="color:#666;display:inline-block;width:100%;border-bottom:1px dotted #c2d3ae;" href="http://shop59633421.taobao.com/category-830177572.htm" target="_blank">化妆健美</a> </dt> </span><!-- 弹出 star --> </dl> </div> <div style="float:left;margin-left:5px;width:750px; overflow:hidden;height:420px" class="J_TWidget cc_3g1p4" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'nav_tqLCw'}" data-widget-type="Tabs"> <div style="height:420px;left:0;top:0" class="J_TWidget" data-widget-config="{'navCls':'scroller-nav','contentCls':'scroller-content','steps':1,'prevBtnCls': 'prev','nextBtnCls': 'next','disableBtnCls': 'disable', 'circular':true, 'effect':'scrollx', 'easing':'elasticOut', 'duration':1.0, 'interval':'4', 'autoplay':false }" data-widget-type="Carousel"> <div class="scroller" style="width:500px; height:420px; overflow:hidden;zoom:1;float:left;"><ul class="scroller-content" style="left:0px;"><li style="width:500px;height:420px; overflow:hidden"><a href="#" target="_blank" style="display:block;width:100%;height:100%;background:url(http://img02.taobaocdn.com/imgextra/i2/770458061/TB2BAgobFXXXXXoXXXXXXXXXXXX-770458061.gif) no-repeat center center;"></a></li><li style="width:500px;height:420px; overflow:hidden"><a href="#" target="_blank" style="display:block;width:100%;height:100%;background:url(http://img03.taobaocdn.com/imgextra/i3/770458061/TB2y7sobFXXXXXzXXXXXXXXXXXX-770458061.gif) no-repeat center center;"></a></li></ul></div><div class="nav_tqLCw" style="width:250px;height:420px;overflow:hidden"><ul class="scroller-nav" style="left:700px;top:0;"><li style="width:248px;height:208px; overflow:hidden;border:1px solid #e5e5e5;"><a href="#" target="_blank" style="display:block;width:100%;height:100%;"> <img src="http://img02.taobaocdn.com/imgextra/i2/770458061/TB2BAgobFXXXXXoXXXXXXXXXXXX-770458061.gif" alt="" width="248px" height="208"> </a></li><li style="width:248px;height:208px; overflow:hidden;border:1px solid #e5e5e5;"><a href="#" target="_blank" style="display:block;width:100%;height:100%;"> <img src="http://img03.taobaocdn.com/imgextra/i3/770458061/TB2y7sobFXXXXXzXXXXXXXXXXXX-770458061.gif" alt="" width="248px" height="208"> </a></li></ul></div></div></div></div><a name="sgmb"></a>


淘宝卖家们只需要进入卖家中心,在自定义模板中点击“源代码”。粘贴以上代码,点击发布后就可以看到动态的淘宝分类效果了。代码中的中文字体都可以根据店家的具体要求进行相应修改。唯艺不建议卖家们自行修改模板中的板块大小,以免出现错位或者板块破裂。


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

0

相关教程

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

  • 时尚简约 瀑布流 装饰家居淘宝模板

    时尚简约 瀑布流 装饰家居淘宝模板

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

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

    人气:30549
  • 高端优雅 多功能 精品鞋包淘宝模板

    高端优雅 多功能 精品鞋包淘宝模板

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

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

    人气:0
  • 日用杂货 清新简约 生活兴趣网店模板

    日用杂货 清新简约 生活兴趣网店模板

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

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

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

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

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

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

    人气:43216