淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1784|回复: 9
收起左侧

【自家制】C店访天猫新鲜街Banner缩小到950效果

[复制链接]
  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-6-27 09:17:24 | 显示全部楼层 |阅读模式
    本帖最后由 我是小小煒 于 2015-6-27 09:32 编辑

    2.png
    C店访天猫新鲜街Banner缩小到950效果
    店铺效果:http://shop118242347.taobao.com/p/rd807920.htm
    代码分享:
    1. <!--整体框架-->
    2. <div class="lww" style="height:303px;">
    3.   <div class="footer-more-trigger mui-display-none" style="padding:0px;visibility:visible;border:0;top:auto;width:950px;height:303px;z-index:99;left:-30%;">
    4.         <div class="footer-more-trigger mui-display-none" style="left:0;top:0;padding:0px;visibility:visible;border:0;width:950px;height:303px;">
    5.      <!--调用淘宝框架-->
    6.      <div class="J_TWidget"  data-widget-type="Carousel"  data-widget-config="{ 'effect': 'scrollx','easing': 'easeOutStrong','viewSize': [950],'prevBtnCls': 'lww_prev','nextBtnCls': 'lww_next','circular':true,'autoplay':true,'triggerType':'mouse','activeTriggerCls':'arrow-d','navCls':'lww_nav','contentCls':'lww_con',}" style="width:950px; height:303px">
    7.       <!--主要内容框架-->
    8.       <div style="height:303px;width:950px;overflow:hidden;padding:0px;margin:0px;">
    9.        <ul class="lww_con" style="height:303px;width:950px;padding:0px;margin:0px;">
    10.         <li style="width:950px;height:303px;padding:0px;margin:0px;">
    11.                 <a target="_blank" href="#" style="padding:0px;margin:0px;">
    12.         <img src="http://img01.taobaocdn.com/imgextra/i1/2477674920/TB2s2nOdpXXXXavXXXXXXXXXXXX_!!2477674920.jpg" width="950px" height="303px" border="0px" />
    13.         </a>
    14.                 </li>
    15.         <li style="width:950px;height:303px;padding:0px;margin:0px;">
    16.                 <a target="_blank" href="#" style="padding:0px;margin:0px;">
    17.         <img src="http://img01.taobaocdn.com/imgextra/i1/2477674920/TB2oY6tdpXXXXbQXpXXXXXXXXXX_!!2477674920.jpg" width="950px" height="303px" border="0px" />
    18.         </a>
    19.                 </li>
    20.         <li style="width:950px;height:303px;padding:0px;margin:0px;">
    21.                 <a target="_blank" href="#" style="padding:0px;margin:0px;">
    22.         <img src="http://img01.taobaocdn.com/imgextra/i1/2477674920/TB2YXbydpXXXXaCXpXXXXXXXXXX_!!2477674920.jpg" width="950px" height="303px" border="0px" />
    23.         </a>
    24.                 </li>
    25.        </ul>
    26.       </div>
    27.       <!--选项内容框架-->
    28.        <div class="footer-more-trigger" style="padding:0px;border:none;border:0px;left:50%;">
    29.                 <div class="footer-more-trigger" style="width:700px;height:45px;padding:0px;border:none;border:0px;left:-450px;top:270px;">
    30.          <ul class="lww_nav" style="width:600px;float:left;height:45px;margin-left:10px;text-align:center;border:none;border:0px;">
    31.           <li style="display:inline;list-style: none;width: 24px;height: 24px;line-height: 25px;text-align: center;border-radius: 12px;background: 0 0;display: inline-block;zoom: 1;margin: 0 1px;background: #06F;color: #FFF;">
    32.                         1
    33.                   </li>
    34.           <li style="display:inline;list-style: none;width: 24px;height: 24px;line-height: 25px;text-align: center;border-radius: 12px;background: 0 0;display: inline-block;zoom: 1;margin: 0 1px;background: #06F;color: #FFF;">
    35.                         2
    36.                   </li>
    37.           <li style="display:inline;list-style: none;width: 24px;height: 24px;line-height: 25px;text-align: center;border-radius: 12px;background: 0 0;display: inline-block;zoom: 1;margin: 0 1px;background: #06F;color: #FFF;">
    38.                         3
    39.                   </li>
    40.          </ul>
    41.         </div>
    42.        </div>
    43.        <!--/选项内容框架-->
    44.      </div>
    45.       <!--倒计时内容调用-->
    46.      <div class="footer-more-trigger" style="width:300px;height:291px;background:#FFF;left:625px;top:0.1px; border:1px #999 solid;">
    47.       <div style="width:270px; height:70px; font-family:微软雅黑; font-size:22px; color:#000;margin:10px 0 0 5px; line-height:26px;">
    48.       下期预告
    49.       <div style="font-size:18px; color:#999; margin-top:10px;">离开场仅剩:</div>
    50.       <!--倒计时内容调用-->
    51.       <div style="width:300px; height:45px; margin-top:10px;">
    52.         <div class="J_TWidget" data-widget-type="Countdown"  data-widget-config="{'endTime': '2015-12-31 23:59:59','interval': 1000,'timeRunCls': '.ks-countdown-run','timeUnitCls':{'d': '.ks-d', 'h':'.ks-h', 'm': '.ks-m', 's': '.ks-s', 'i': '.ks-i'},'minDigit': 1,'timeEndCls': '.ks-countdown-end'}">
    53.       <div class="ks-countdown-run">
    54.       <div style=" width:75px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    55.       <span class="ks-d">00</span>天
    56.       </div>
    57.       
    58.       <div style=" width:60px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    59.       <span class="ks-h">00</span>时
    60.       </div>
    61.       
    62.       <div style=" width:60px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    63.       <span class="ks-m">00</span>分
    64.       </div>
    65.       
    66.       <div style=" width:60px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    67.       <span class="ks-s">00</span>秒
    68.       </div>
    69.       
    70.       </div>
    71.      </div>
    72.       </div>
    73.       <!--/倒计时内容调用-->
    74.       <img src="http://img04.taobaocdn.com/imgextra/i4/2477674920/TB2kyLJdpXXXXbIXXXXXXXXXXXX_!!2477674920.png" style=" width:300px;margin:20px auto">
    75.       </div>
    76.      </div>
    77.      <!--/倒计时内容调用-->
    78.     </div>
    79.    </div>
    80. </div>
    81. <!--/整体框架-->
    复制代码




    评分

    参与人数 1美工币 +1 收起 理由
    snrtmnmnyk + 1 感谢分享!

    查看全部评分

    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    臭美
    2016-11-20 15:19
  • 签到天数: 111 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    146

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30150

    QQ
    发表于 2015-9-23 18:55:23 | 显示全部楼层
    支持支持哈哈哈哈!!!!!支持淘宝美工论坛!!!希望论坛越办越好!!!
  • TA的每日心情
    不爽
    2016-5-27 11:51
  • 签到天数: 122 天

    连续签到: 1 天

    [LV.7]炉火纯青

    32

    主题

    719

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    13420

    最佳新人热心会员

    QQ
    发表于 2015-7-31 11:08:01 | 显示全部楼层
    淘宝美工论坛Taobaoux.com,全国最大的淘宝美工人才基地

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2015-8-13 10:36
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]登堂入室

    1

    主题

    26

    帖子

    2501

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2501

    发表于 2015-7-21 16:36:55 | 显示全部楼层
    不错哦。先收藏

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    无奈
    2015-7-11 15:26
  • 签到天数: 9 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    24

    帖子

    4859

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4859

    发表于 2015-7-1 11:43:32 | 显示全部楼层
    看起来很不错。支持下

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2016-10-1 13:23
  • 签到天数: 51 天

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    101

    帖子

    6802

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6802

    最佳新人

    发表于 2015-6-27 11:01:11 | 显示全部楼层
    路过看看顶起

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-6-11 16:25
  • 签到天数: 192 天

    连续签到: 1 天

    [LV.7]炉火纯青

    23

    主题

    553

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27818

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

    QQ
    发表于 2015-6-27 10:55:43 | 显示全部楼层

    顶顶再。。。。。。。。。。。。。。。。。。。路过!
  • TA的每日心情
    不爽
    3 天前
  • 签到天数: 129 天

    连续签到: 1 天

    [LV.7]炉火纯青

    20

    主题

    454

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28014

    最佳新人热心会员

    发表于 2015-6-27 10:10:14 | 显示全部楼层
    码盲路过

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2015-8-14 09:53
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    7

    主题

    248

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12565

    最佳新人热心会员

    QQ
    发表于 2015-6-27 10:07:21 | 显示全部楼层
    顶。。。。不错啊,很实用
    好的开始,需要不断的努力!
  • TA的每日心情
    抱抱
    昨天 10:05
  • 签到天数: 631 天

    连续签到: 1 天

    [LV.9]已臻大成

    42

    主题

    574

    帖子

    15万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    152979

    最佳新人活跃会员热心会员

    发表于 2015-6-27 09:57:40 | 显示全部楼层
    顶顶再。。。。。。。。。。。。。。。。。。。路过!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-10 22:45 , Processed in 0.130662 second(s), 30 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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