淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2357|回复: 14
收起左侧

仿小米官网效果(修改版-增加小海报)

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

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2016-7-8 14:45:13 | 显示全部楼层 |阅读模式
    之前发过简单版的,这个是增加了海报的位置,基本与小米的一样了,先看效果:
    GIF.gif
    代码如下:
    1. <!-- 标题 -->
    2. <div style="height:60px;">
    3.     <div class="footer-more-trigger" style="border:0px;left:auto;padding:0px;top:auto;">
    4.         <div class="footer-more-trigger" style="border:0px;padding:0px;top:-20px;width:1920px;left:-485px;height:80px;background:#F5F5F5;">
    5. <div style="width:1230px;height:20px;background:#F5F5F5;margin-left:345px;font-family:微软雅黑;color:#555;padding-top:30px;">
    6.   <div style="height: 60px;float: left;font-size: 22px;">U盘推荐</div>
    7.   <a ><img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2MQJqsFXXXXaJXXXXXXXXXXXX_!!2528527229.png" style="display: block;float:right;height: 20px;margin-top:7px;" alt=""></a>
    8.   <div style="height: 60px;float: right;margin-right:5px;margin-top:7px;"><a  style="font-family:微软雅黑;color:#555;font-size: 16px;">查看全部</a></div>
    9. </div>
    10.          </div>
    11.      </div>
    12. </div>
    13. <!-- 标题end -->

    14. <!-- U盘推荐01 -->
    15. <div style="height:300px;">
    16.     <div class="footer-more-trigger" style="border:0px;left:auto;padding:0px;top:auto;">
    17.         <div class="footer-more-trigger" style="border:0px;padding:0px;top:-20px;width:1920px;left:-485px;height:320px;background:#F5F5F5;">
    18. <div style="height:320px;width:1230px;overflow:hidden;background: #f5f5f5;margin-left:345px;">
    19. <div style="float: left;width: 234px;height: 300px;margin-right: 15px;box-shadow:0px 0px 10px #e7e7e7;"><a ><img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2pINesFXXXXXsXpXXXXXXXXXX_!!2528527229.png" alt=""></a></div>
    20. <!-- 包裹 -->
    21. <div class="footer-more-trigger" style="width:981px;height:10px;border:none;left:0px;top:0px;padding:0px;left:594px;">
    22. <!-- 产品列表 -->
    23. <div class="footer-more-trigger" style="width:981px;height:300px;border:none;left:0px;padding:0px;font-family:微软雅黑;top:0px;">
    24.        <!--产品01-->
    25.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:15px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #E53935;">
    26.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    27.          <img src="https://img.alicdn.com/imgextra/i3/2528527229/TB2ZQ_ycVXXXXaoXXXXXXXXXXXX_!!2528527229.jpg" alt="金属卡片" width="180" height="180" />
    28.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">金属拉丝卡片U盘</div>
    29.          <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    30.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、彩印、丝印</div>
    31.        </div>
    32.        <!--产品02-->
    33.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:15px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #E53935;">
    34.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    35.          <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2ltfKeFXXXXaNXpXXXXXXXXXX_!!2528527229.jpg" alt="金属魔方" width="180" height="180" />
    36.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">金属魔方U盘</div>
    37.          <div style="width:234px;height:24px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    38.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;;">可激光、丝印</div>
    39.        </div>
    40.        <!--产品03-->
    41.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:15px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #E53935;">
    42.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    43.          <img src="https://img.alicdn.com/imgextra/i1/2528527229/TB2oxTDcVXXXXXqXXXXXXXXXXXX_!!2528527229.jpg" alt="塑料卡片" width="180" height="180" />
    44.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">超薄名片式U盘</div>
    45.          <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    46.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可彩印、丝印</div>
    47.        </div>
    48.        <!--产品04-->
    49.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:0px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #83c44e;">
    50.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#83c44e;">新品</div>
    51.          <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB24DrHeFXXXXbqXpXXXXXXXXXX_!!2528527229.jpg" alt="迷你U盘" width="180" height="180" />
    52.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">迷你旋转商务U盘</div>
    53.          <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    54.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、丝印</div>
    55.        </div>
    56. </div>
    57. <!--动感切换开始-->
    58. <div class="footer-more" style="width:981px;height:300px;padding:0px;margin:0px;position:relative;right:0px;bottom:0px;border:none;background:none;overflow:hidden;">
    59.      <div class="J_TWidget footer-more-panel" data-widget-type="Carousel" data-widget-config="{'activeTriggerCls':'item-text','easing':'easeBoth','effect':'scrollx','navCls':'ling-nav','contentCls':'ling-cnt','activeIndex':4,'autoplay':false}" style="position:relative;border:none;bottom:0px;right:0px;padding:0px;background:none;">
    60.              <ul class="ling-cnt" style="display:none;"><li></li></ul>
    61.              <div class="ling-nav search-wrap-cloud" style="width:999999px;height:300px;"><!-- width得足够大 -->
    62.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:33px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2GxmCeFXXXXaNXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    63.                  </a>
    64.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:87px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2zl68eFXXXXXYXXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    65.                  </a>
    66.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:141px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2xLmAeFXXXXaPXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    67.                  </a>
    68.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:195px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2LG9JeFXXXXc_XXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    69.                  </a>
    70.             </div>
    71.      </div>
    72. </div>
    73. <!-- 效果end -->
    74. </div>
    75. </div>
    76.          </div>
    77.      </div>
    78. </div>
    79. <!-- U盘推荐01end -->

    80. <!-- U盘推荐02 -->
    81. <div style="height:300px;">
    82.     <div class="footer-more-trigger" style="border:0px;left:auto;padding:0px;top:auto;">
    83.         <div class="footer-more-trigger" style="border:0px;padding:0px;top:-25px;width:1920px;left:-485px;height:325px;background:#F5F5F5;">
    84. <div style="height:320px;width:1230px;overflow:hidden;background: #f5f5f5;margin-left:345px;">
    85. <div style="float: left;width: 234px;height: 300px;margin-right: 15px;box-shadow:0px 0px 10px #e7e7e7;"><a ><img src="https://img.alicdn.com/imgextra/i3/2528527229/TB2wxkMspXXXXXLXFXXXXXXXXXX_!!2528527229.png" alt=""></a></div>
    86. <!-- 包裹 -->
    87. <div class="footer-more-trigger" style="width:981px;height:10px;border:none;left:0px;top:0px;padding:0px;left:594px;">
    88. <!-- 产品列表 -->
    89. <div class="footer-more-trigger" style="width:981px;height:300px;border:none;left:0px;padding:0px;font-family:微软雅黑;top:0px;">
    90.        <!--产品01-->
    91.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:15px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #E53935;">
    92.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    93.          <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB28ZxcsFXXXXcDXXXXXXXXXXXX_!!2528527229.png" alt="旋转U盘" width="180" height="180" />
    94.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">多彩旋转U盘</div>
    95.          <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    96.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、丝印</div>
    97.        </div>
    98.        <!--产品02-->
    99.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:15px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #E53935;">
    100.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    101.          <img src="https://img.alicdn.com/imgextra/i3/2528527229/TB2BLdqsFXXXXaPXXXXXXXXXXXX_!!2528527229.jpg" alt="水晶U盘" width="180" height="180" />
    102.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">创意发光水晶U盘</div>
    103.          <div style="width:234px;height:24px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    104.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;;">可激光、丝印</div>
    105.        </div>
    106.        <!--产品03-->
    107.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:15px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #2196F3;">
    108.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#fff;">热卖中</div>
    109.          <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2rdzVeFXXXXb5XXXXXXXXXXXX_!!2528527229.jpg" alt="小书本" width="180" height="180" />
    110.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">时尚小书本U盘</div>
    111.          <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    112.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可彩印、丝印</div>
    113.        </div>
    114.        <!--产品04-->
    115.        <div  style="width:234px;height:299px;display:block;float:left;margin-right:0px;padding:0px;text-align:center;background: #fff;box-shadow:0px 0px 10px #e7e7e7;border-top:1px solid #2196F3;">
    116.          <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#fff;">新品</div>
    117.          <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2uHBjsFXXXXbEXXXXXXXXXXXX_!!2528527229.jpg" alt="多彩手环" width="180" height="180" />
    118.          <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">多彩手环U盘</div>
    119.          <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    120.          <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">多色可选、可丝印</div>
    121.        </div>
    122. </div>
    123. <!--动感切换开始-->
    124. <div class="footer-more" style="width:981px;height:300px;padding:0px;margin:0px;position:relative;right:0px;bottom:0px;border:none;background:none;overflow:hidden;">
    125.      <div class="J_TWidget footer-more-panel" data-widget-type="Carousel" data-widget-config="{'activeTriggerCls':'item-text','easing':'easeBoth','effect':'scrollx','navCls':'ling-nav','contentCls':'ling-cnt','activeIndex':4,'autoplay':false}" style="position:relative;border:none;bottom:0px;right:0px;padding:0px;background:none;">
    126.              <ul class="ling-cnt" style="display:none;"><li></li></ul>
    127.              <div class="ling-nav search-wrap-cloud" style="width:999999px;height:300px;"><!-- width得足够大 -->
    128.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:33px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i1/2528527229/TB21bcVspXXXXaFXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    129.                  </a>
    130.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:87px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2E_aReFXXXXbtXXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    131.                  </a>
    132.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:141px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2eW2MeFXXXXaSXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    133.                  </a>
    134.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:195px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB248YReFXXXXXoXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    135.                  </a>
    136.             </div>
    137.      </div>
    138. </div>
    139. <!-- 效果end -->
    140. </div>
    141. </div>
    142.          </div>
    143.      </div>
    144. </div>
    145. <!-- U盘推荐02end -->
    复制代码



    评分

    参与人数 1美工币 +24 收起 理由
    不想插在牛粪上 + 24 很给力!

    查看全部评分

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


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

  • TA的每日心情
    抱抱
    5 小时前
  • 签到天数: 160 天

    连续签到: 1 天

    [LV.7]炉火纯青

    27

    主题

    919

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    25627

    热心会员最佳新人灌水之王

    发表于 2016-7-8 16:05:39 | 显示全部楼层
    厉害                    
    其实我只是一枚小小的小白  大神不必在意啦~~
  • TA的每日心情
    不爽
    2016-8-12 11:00
  • 签到天数: 22 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    5

    主题

    118

    帖子

    2904

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2904

    发表于 2016-7-8 16:10:31 | 显示全部楼层
    跪拜大神
    鱼爱着水,水却煮了鱼。
  • TA的每日心情
    心跳
    昨天 18:40
  • 签到天数: 169 天

    连续签到: 5 天

    [LV.7]炉火纯青

    50

    主题

    617

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35073

    发表于 2016-7-8 16:13:44 | 显示全部楼层

    从小不学好,长大开淘宝
  • TA的每日心情
    吐舌头
    2016-9-30 09:59
  • 签到天数: 59 天

    连续签到: 2 天

    [LV.5]略有小成

    19

    主题

    550

    帖子

    961

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    961

    发表于 2016-7-8 16:36:05 | 显示全部楼层
    连字都用代码

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


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

  • TA的每日心情

    2016-10-12 09:05
  • 签到天数: 12 天

    连续签到: 1 天

    [LV.3]武林新秀

    48

    主题

    606

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31387

    发表于 2016-7-8 18:04:13 | 显示全部楼层
    前排膜拜大神~

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


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

  • TA的每日心情

    5 天前
  • 签到天数: 160 天

    连续签到: 1 天

    [LV.7]炉火纯青

    7

    主题

    100

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    34528

    发表于 2016-7-8 19:21:05 | 显示全部楼层
    能把你的软件再分享吗.看过你的贴子.以为你不在了.没想到你还在.

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


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

  • TA的每日心情
    大哭
    4 小时前
  • 签到天数: 237 天

    连续签到: 4 天

    [LV.7]炉火纯青

    19

    主题

    552

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56088

    发表于 2016-7-8 19:34:48 | 显示全部楼层
    代码看了就犯晕。大神~ 


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


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

  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2016-7-8 21:50:30 | 显示全部楼层
    如果有如果 发表于 2016-7-8 19:21
    能把你的软件再分享吗.看过你的贴子.以为你不在了.没想到你还在.

    我一直都在啊,你是说哪个软件

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


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

  • TA的每日心情
    臭美
    2016-7-9 10:03
  • 签到天数: 11 天

    连续签到: 3 天

    [LV.3]武林新秀

    3

    主题

    45

    帖子

    2092

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2092

    发表于 2016-7-9 10:06:58 | 显示全部楼层
    虽然完全不懂 但是觉得你们牛逼

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-4 16:16 , Processed in 0.136430 second(s), 26 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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