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

7图展示区立体特效淘宝店装修代码

2015-03-27 11:48:26

店铺中的展示区是一个天赐的打广告机会。大幅的区域能够一眼让买家注意到这个区域。制作精美的模板能够第一时间抓住客户的眼球。另外,一个排版有序的展示区模板能够让客户第一时间了解店铺的上新、爆款、活动等基本情况。所以在淘宝店铺装修中要认真对待展示区的模板设计。

使用软件制作清晰精致的展示模板比较耗时,也许会赶不上上新、促销等活动的脚步。只要你知道如何复制粘贴模板代码,就能把制作展示区模板的难题在一分钟内搞定。

唯艺温馨提示:此展示区模板最多能承载7张展示图片。此高级展示区模板代码实现阴影效果,为高级代码;适用于旺铺专业版店铺;卖家们可以在代码中更换展示的宝贝地址/链接。因7图模板较大,所以代码比较多、复杂。




7图立体特效代码



<div class="sg-hd"style="color:#351405;overflow:hidden;text-align:center;zoom:1;height:58px"><div style="background:url(http://img02.taobaocdn.com/imgextra/i2/52995017/TB22pMSbVXXXXaeXpXXXXXXXXXX-52995017.jpg) no-repeat center 0;height:58px;overflow:hidden;"><h3 style="font-family:微软雅黑;font-size: 26px;padding-top: 5px;">本期の推荐/其他卖家想要的标题</h3><h4 style="font-family:arial;text-transform:uppercase;overflow:hidden;font-weight:normal;font-size:14px;padding-top: 2px;">recommend goods</h4></div><span style="clear:both;display:block;overflow:hidden;float: right;position: relative;right: 40px;top: -60px;"><a style="color:#351405;padding:0 15px;margin-top:10px;display:inline-block;;"target="_blank"href="http://shop59633421.taobao.com/search.htm?keyword=+查看更多〉">+查看更多〉</a></span></div><div class="sg-bd"style="font-family:arial;"><ul style="overflow:hidden; clear:both;zoom:1; text-align:center;color:#323232"><li style="float:left;margin:0 10px 0 0; background:#efe9dc; width:228px; border:1px solid #b0998b"><a class="list_bgyv643mg7"style="display:block; width:228px; height:230px; background:url(http://img01.taobaocdn.com/bao/uploaded/i1/14322024077293692/T1eTJfFoxgXXXXXXXX_!!0-item_pic.jpg_230x230.jpg) no-repeat center center"href="http://item.taobao.com/item.htm?id=17503642751"target="_blank"></a><a href="http://item.taobao.com/item.htm?id=17503642751"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;">展示区内的宝贝标题</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;99.00</b></span><div style="display:none; width:228px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_bgyv643mg7','align':{'node':'.list_bgyv643mg7','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li><li style="float:left;margin:0 10px 0 0; background:#efe9dc; width:468px; border:1px solid #b0998b"><a class="list_zxovy5vimf"style="display:block; width:468px; height:230px; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1cKWuFExXXXXXXXXX_!!0-item_pic.jpg_468x468.jpg) no-repeat center center"href="展示区内的宝贝链接"target="_blank"></a><a href="展示区内的宝贝链接"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;"> 展示区内的宝贝标题->B158-1</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;30.00</b></span><div style="display:none; width:468px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_zxovy5vimf','align':{'node':'.list_zxovy5vimf','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li><li style="float:left;margin:0 0 0 0; background:#efe9dc; width:228px; border:1px solid #b0998b"><a class="list_gr88do6rjf"style="display:block; width:228px; height:230px; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1df5FFeFfXXXXXXXX_!!0-item_pic.jpg_230x230.jpg) no-repeat center center"href="展示区内的宝贝链接"target="_blank"></a><a href="展示区内的宝贝链接"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;"> 展示区内的宝贝标题 ->B144-2</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;30.00</b></span><div style="display:none; width:228px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_gr88do6rjf','align':{'node':'.list_gr88do6rjf','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li><li style="float:left;margin:10px 10px 0 0; background:#efe9dc; width:228px; border:1px solid #b0998b"><a class="list_k9r3ba0gxr"style="display:block; width:228px; height:230px; background:url(http://img01.taobaocdn.com/bao/uploaded/i4/T10lSGFhXdXXXXXXXX_!!0-item_pic.jpg_230x230.jpg) no-repeat center center"href="展示区内的宝贝链接"target="_blank"></a><a href="展示区内的宝贝链接"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;"> 展示区内的宝贝标题->B130-3</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;30.00</b></span><div style="display:none; width:228px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_k9r3ba0gxr','align':{'node':'.list_k9r3ba0gxr','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li><li style="float:left;margin:10px 10px 0 0; background:#efe9dc; width:228px; border:1px solid #b0998b"><a class="list_5it61x4glp"style="display:block; width:228px; height:230px; background:url(http://img02.taobaocdn.com/bao/uploaded/i1/T1ariuFEteXXXXXXXX_!!0-item_pic.jpg_230x230.jpg) no-repeat center center"href="展示区内的宝贝链接"target="_blank"></a><a href="展示区内的宝贝链接"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;"> 展示区内的宝贝标题->B163-3</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;30.00</b></span><div style="display:none; width:228px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_5it61x4glp','align':{'node':'.list_5it61x4glp','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li><li style="float:left;margin:10px 10px 0 0; background:#efe9dc; width:228px; border:1px solid #b0998b"><a class="list_yd47aqvkio"style="display:block; width:228px; height:230px; background:url(http://img03.taobaocdn.com/bao/uploaded/i4/T1NaIGFXteXXXXXXXX_!!0-item_pic.jpg_230x230.jpg) no-repeat center center"href="展示区内的宝贝链接"target="_blank"></a><a href="展示区内的宝贝链接"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;"> 展示区内的宝贝标题->B151-1</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;30.00</b></span><div style="display:none; width:228px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_yd47aqvkio','align':{'node':'.list_yd47aqvkio','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li><li style="float:left;margin:10px 0 0 0; background:#efe9dc; width:228px; border:1px solid #b0998b"><a class="list_jgqywyal8y"style="display:block; width:228px; height:230px; background:url(http://img02.taobaocdn.com/bao/uploaded/i2/T1w4aGFmlcXXXXXXXX_!!0-item_pic.jpg_230x230.jpg) no-repeat center center"href="展示区内的宝贝链接"target="_blank"></a><a href="展示区内的宝贝链接"target="_blank"style="color:#323232;height:20px; line-height:20px; overflow:hidden; display:block; text-align:center; margin:6px 10px 0 10px;"> 展示区内的宝贝标题->B141-5</a><span style="display:inline-block;height:20px; line-height:20px;margin:6px 0 0 0;"><b style="color:#323232;font-size:14px;">RMB &yen;30.00</b></span><div style="display:none; width:228px; height:231px;background:#FFF;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);;opacity:.3"class="J_TWidget"data-widget-type="Popup"data-widget-config="{'trigger':'.list_jgqywyal8y','align':{'node':'.list_jgqywyal8y','offset':[0,0],'points':['cc','cc']}}"><a href="展示区内的宝贝链接"style="text-decoration:none;display:block; width:228px;text-align:center; color:#FFF; height:230px;"target="_blank"></a></div></li></ul></div>


此7图立体特效代码提供足够的空间让卖家们能够放置多种爆款,促销内容等。其中,居中的方格最大,唯艺建议卖家朋友们可以制作一些唯美、抢眼的海报设计,消除买家对广告促销等的视觉疲劳度。此7图立体特效代码的最大卖点就在于它能够实现阴影效果,产生立体视觉,更能吸引客户的眼球。如果你正在筹划制作一个活动促销广告,或者普通的爆款展示区,直接套用这个7图立体特效代码便可。


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

0

相关教程

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

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

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

    人气:30549
  • 高雅大牌 舒爽浅色 女包女鞋网店模板

    高雅大牌 舒爽浅色 女包女鞋网店模板

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

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

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

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

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

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

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

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

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

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

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

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

    人气:40580