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

龙腾系列淘宝店铺促销装修代码模板(三)

2015-04-07 04:34:20

       在之前的龙腾系列淘宝店铺促销装修代码模板教程中,我们应该已经做好了2个模块。现在我们来参考以下代码制作第三个模块——饮料区。在以下代码中,唯艺并不建议卖家朋友们随意更改代码框架的尺寸大小。不统一的店铺促销代码会导致整体效果崩溃,给淘宝店铺装修带来不小的麻烦。



<div class="J_TWidget" data-widget-config="{'navCls':'hidden-nav','effect':'scrollx','contentCls':'sg-content','circular':true,'easing':'easeOutStrong','duration':1.0,'interval':'4','autoplay':false}" data-widget-type="Carousel" style="float:left;width:465px;margin:6px 6px 0 0;display:inline;font-size:14px;"> <div style="width:100px;float:left;;"> <h3 style="text-align:center;font-size:24px;color:#e5cf6f;line-height:46px;float:left;margin-bottom:4px;width:100px;height:46px;background:url( http://img04.taobaocdn.com/imgextra/i4/770458061/TB2hRV_bFXXXXbGXXXXXXXXXXXX-770458061.png ) center no-repeat;"> <span style="display:block;width:84px;height:46px;overflow:hidden;margin:0 auto;"> 饮料区 </span> </h3> <ul style="width:100px;overflow:hidden;float:left" class="hidden-nav">  <li style="float:left;margin:0px 0 4px 0" class="list_Aw0bn1"> <a href="饮料区宝贝链接" target="_blank" style="display:block;width:90px;height:90px;;border:5px solid #fff;background:url( http://img03.taobaocdn.com/bao/uploaded/i3/T1abJnFttkXXXXXXXX_!!0-item_pic.jpg_100x100.jpg ) center no-repeat;"></a> </li>  <li style="float:left;margin:0px 0 4px 0" class="list_qiLIE2"> <a href="饮料区宝贝链接" target="_blank" style="display:block;width:90px;height:90px;;border:5px solid #fff;background:url( http://img04.taobaocdn.com/bao/uploaded/i4/T1OuCJFjhXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg ) center no-repeat;"></a> </li>  <li style="float:left;margin:0px 0 0 0" class="list_0LViW3"> <a href="饮料区宝贝链接" target="_blank" style="display:block;width:90px;height:90px;;border:5px solid #fff;background:url( http://img02.taobaocdn.com/bao/uploaded/i2/T1tMCSFfdXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg ) center no-repeat;"></a> </li>  </ul> </div> <div style="float:left;;width:360px;height:360px;overflow:hidden;margin-left:5px;display:inline;"> <ul class="sg-content">  <li style="width:350px;height:350px;border:5px solid #fff;background:url( http://img03.taobaocdn.com/bao/uploaded/i3/T1abJnFttkXXXXXXXX_!!0-item_pic.jpg_360x360.jpg ) center no-repeat;" class="list_DnjUt1"> <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.list_DnjUt1', 'align':{ 'node':'.list_DnjUt1', 'offset':[0,0], 'points':['bc','bc'] } }" > <a href="饮料区宝贝链接" target="_blank" style="border:5px solid #ff0000;border-bottom:none;display:block;width:350px;height:260px;"></a> <div style="border:5px solid #ff0000;border-top:none;" class="list_DnjUt1"> <div style="width:310px;height:90px;padding:0 20px;background-color:#a80102;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);opacity:0.7;"> <p style="color:#fff;line-height:20px;padding:5px 0;"> 饮料区宝贝题目</p> <div style="color:#eafa37;overflow:hidden;"> <div style="float:left;"> <span style="color:#fff;float:left;padding:13px 3px 0 0;">新春价:</span> <span style="font-size:30px;font-family:arial;float:left;">30.00</span><span style="float:left;padding-top:13px;">元</span> </div> <div style="width:72px;float:right;"> <a href="http://favorite.taobao.com/popup/add_collection.htm?id=39555848022&itemtype=1" target="_blank" style="width:27px;height:28px;border-radius:50%;background:url(http://img02.taobaocdn.com/imgextra/i2/770458061/TB2WWKabFXXXXbkXXXXXXXXXXXX-770458061.png) center no-repeat;float:right;margin-right:9px;"></a> <div class="sns-widget" title="分享" style="cursor:pointer;display:inline-block;*zoom:1;*display:inline;width:27px;height:28px;border-radius:50%;background:url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB2rOh3bFXXXXbTXpXXXXXXXXXX-770458061.png) 0 0 no-repeat;" data-sharebtn="{&quot;client_id&quot;:&quot;68&quot;,&quot;skinType&quot;:&quot;3&quot;,&quot;comment&quot;:&quot; 饮料区宝贝题目&quot;,&quot;isShowFriend&quot;:false,&quot;type&quot;:&quot;item&quot;,&quot;key&quot;:&quot;39555848022&quot;}"></div> </div> </div> </div> </div> </div> </li> </ul> </div> </div>


       跟之前的模块代码一样,从<li> ……到</li>之间的内容是一个展示宝贝的完整代码。只要在以上代码的最后一个“</ul>”标签之前复制粘贴<li> ……</li>内容就可以了;仅限复制2次!为确保代码的复制粘贴工作进展顺利,唯艺建议卖家朋友们在复制粘贴龙腾系列淘宝店铺促销装修代码之后,预览效果;如果有问题还能够及时地处理。


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

0

相关教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    人气:30549