淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1248|回复: 2
收起左侧

女装,女包适合用模块!

[复制链接]
  • TA的每日心情

    2015-8-16 20:56
  • 签到天数: 72 天

    连续签到: 1 天

    [LV.6]渐入佳境

    33

    主题

    424

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29746

    最佳新人热心会员

    发表于 2015-3-10 17:34:06 | 显示全部楼层 |阅读模式
    为新店铺装修设计了一些模块,写好一个就逐渐发上来共享。
    这次澈哥模块是仿照时尚起义的。
    效果:
    QQ截图20150310173050.png

    代码:
    1. <div style="width:950px;">


    2. <!--/*/*左部分*/*/-->
    3.   <div style="width:470px; float:left; border:0;">
    4.       <div  class="J_TWidget tab1" data-widget-type="Tabs">
    5.             <ul class="ks-switchable-nav" style="list-style:none; float:left; width:245px;">
    6.                 <li class="ks-active" style="float:left;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    7.                 <li style="float:left; padding-left:10px;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    8.                 <li style="float:left; padding-top:10px;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    9.                 <li style="float:left; padding-left:10px; padding-top:10px;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    10.                
    11.             </ul>
    12.             <div class="ks-switchable-content" style="float:right; width:223px;">
    13.               <!--内容a-->
    14.                 <div>
    15.                   
    16.                     <div style="float:right; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    17.                     
    18.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img02.taobaocdn.com/imgextra/i2/785297359/TB2wUE1bVXXXXceXXXXXXXXXXXX_!!785297359.jpg"></div>
    19.                     
    20.                     <div style="padding-top:5px; color:#CCC;">
    21.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    22.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    23.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    24.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    25.                     
    26.                     </div>
    27.                 </div>
    28.                 <!--内容b-->
    29.                 <div style="display: none">
    30.                   
    31.                     <div style="float:right; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    32.                     
    33.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB29Ok3bVXXXXcAXXXXXXXXXXXX_!!785297359.jpg"></div>
    34.                     
    35.                     <div style="padding-top:5px; color:#CCC;">
    36.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    37.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    38.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    39.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    40.                     
    41.                     </div>
    42.                     
    43.                     
    44.                     
    45.                 </div>
    46.                 <!--内容c-->
    47.                 <div style="display: none">
    48.                
    49.                
    50.                
    51.                   <div style="float:right; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    52.                     
    53.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB2o7U1bVXXXXXJXpXXXXXXXXXX_!!785297359.jpg"></div>
    54.                     
    55.                     <div style="padding-top:5px; color:#CCC;">
    56.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    57.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    58.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    59.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    60.                     
    61.                     </div>
    62.                
    63.                
    64.                
    65.                 </div>
    66.                 <!--内容d-->
    67.                 <div style="display: none">
    68.                
    69.                
    70.                 <div style="float:right; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    71.                     
    72.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img02.taobaocdn.com/imgextra/i2/785297359/TB2AFc1bVXXXXX9XpXXXXXXXXXX_!!785297359.jpg"></div>
    73.                     
    74.                     <div style="padding-top:5px; color:#CCC;">
    75.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    76.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    77.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    78.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    79.                     
    80.                     </div>
    81.                
    82.                
    83.                
    84.                
    85.                 </div>
    86.             </div>
    87.         </div>
    88.     </div>
    89.     <!--/*/*中间分隔线部分*/*/-->
    90.   <div style="width:1px; float:left; border:0; padding-left:3px;">
    91.       <img src="http://img03.taobaocdn.com/imgextra/i3/785297359/TB2EmM4bVXXXXavXXXXXXXXXXXX_!!785297359.jpg">
    92.     </div>
    93. <!--/*/*右部分*/*/-->
    94.     <div style="width:470px; float:right; border:0; padding-left:5px;">
    95.    
    96.    
    97.       <div  class="J_TWidget tab1" data-widget-type="Tabs">
    98.         
    99.          
    100.             <div class="ks-switchable-content" style="float:left; width:223px;">
    101.               <!--内容a-->
    102.                 <div>
    103.                   
    104.                     <div style="float:left; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    105.                     
    106.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img02.taobaocdn.com/imgextra/i2/785297359/TB2wUE1bVXXXXceXXXXXXXXXXXX_!!785297359.jpg"></div>
    107.                     
    108.                     <div style="padding-top:5px; color:#CCC;">
    109.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    110.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    111.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    112.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    113.                     
    114.                     </div>
    115.                 </div>
    116.                 <!--内容b-->
    117.                 <div style="display: none">
    118.                   
    119.                     <div style="float:left; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    120.                     
    121.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB29Ok3bVXXXXcAXXXXXXXXXXXX_!!785297359.jpg"></div>
    122.                     
    123.                     <div style="padding-top:5px; color:#CCC;">
    124.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    125.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    126.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    127.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    128.                     
    129.                     </div>
    130.                     
    131.                     
    132.                     
    133.                 </div>
    134.                 <!--内容c-->
    135.                 <div style="display: none">
    136.                
    137.                
    138.                
    139.                   <div style="float:left; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    140.                     
    141.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB2o7U1bVXXXXXJXpXXXXXXXXXX_!!785297359.jpg"></div>
    142.                     
    143.                     <div style="padding-top:5px; color:#CCC;">
    144.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    145.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    146.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    147.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    148.                     
    149.                     </div>
    150.                
    151.                
    152.                
    153.                 </div>
    154.                 <!--内容d-->
    155.                 <div style="display: none">
    156.                
    157.                
    158.                 <div style="float:left; padding-bottom:10px;"><img src="http://img01.taobaocdn.com/imgextra/i1/785297359/TB20bo5bVXXXXalXXXXXXXXXXXX_!!785297359.jpg"></div>
    159.                     
    160.                     <div style="margin-top:10px; padding-top:10px;"><img src="http://img02.taobaocdn.com/imgextra/i2/785297359/TB2AFc1bVXXXXX9XpXXXXXXXXXX_!!785297359.jpg"></div>
    161.                     
    162.                     <div style="padding-top:5px; color:#CCC;">
    163.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    164.                     <p style="color:#CCC; margin-left:5px;">Flower pattern flare skirt</p>
    165.                     <hr style="border:none; border-top:1px solid #CCC; height:0;margin-left:5px; margin-right:5px;" />
    166.                      <p style="color:#CCC; margin-left:5px; float:left; font:'微软雅黑'; font-weight:bolder; color:#F33;">RMB:129</p>
    167.                     
    168.                     </div>
    169.                
    170.                
    171.                
    172.                
    173.                 </div>
    174.             </div>
    175.         
    176.         
    177.         
    178.             <ul class="ks-switchable-nav" style="list-style:none; float:right; width:245px;">
    179.                 <li class="ks-active" style="float:left;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    180.                 <li style="float:left; padding-left:10px;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    181.                 <li style="float:left; padding-top:10px;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    182.                 <li style="float:left; padding-left:10px; padding-top:10px;"><img src="http://img04.taobaocdn.com/imgextra/i4/785297359/TB2FcAZbVXXXXXzXpXXXXXXXXXX_!!785297359.jpg"></li>
    183.                
    184.             </ul>
    185.             
    186.         </div>
    187.    
    188.    
    189.    
    190.     </div>
    191.    
    192.    
    193.    
    194.    
    195.    
    196.    
    197. </div>
    复制代码

    另外楼主还在研发一个图片地址替换工具,根据图片名字!所以个人主页会改版。
    大家可以关注下:
    callmesoul.com




    http://callmesoul.taobao.com/
  • TA的每日心情

    2015-8-16 20:56
  • 签到天数: 72 天

    连续签到: 1 天

    [LV.6]渐入佳境

    33

    主题

    424

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29746

    最佳新人热心会员

     楼主| 发表于 2015-3-10 17:34:44 | 显示全部楼层
    http://callmesoul.com/
    http://callmesoul.taobao.com/
  • TA的每日心情
    抱抱
    2016-11-20 18:17
  • 签到天数: 454 天

    连续签到: 1 天

    [LV.9]已臻大成

    10

    主题

    1246

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    http://www.zcool.com.cn/u/12978141

    Rank: 8Rank: 8

    积分
    111128

    天猫美工最佳新人热心会员

    QQ
    发表于 2015-3-10 22:24:35 | 显示全部楼层
    路过看看
    http://www.zcool.com.cn/u/12978141
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-10 20:46 , Processed in 0.113378 second(s), 15 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表