淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3540|回复: 26
收起左侧

【峰生水起】天猫超市类目左侧写入hover的效果

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

    6 天前
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2015-3-21 22:19:29 | 显示全部楼层 |阅读模式
          music 喔 ~耶~~~苦逼们....让气氛嗨起来吧!      好像很久没水帖子了,不是因为忙,而是因为懒。那么今天又给坛友们带来一款天猫超市类目的效果,须然说不上高大上,但个人感觉挺清新,还是蛮不错的。希望各位喜欢哈

    看效果图:



          说明:左侧经过效果是利用集市的一个带有hover做的,所以效果也用于集市店铺;本屌丝没天猫店铺所以就没写入天猫的啦!而宽度我也写的是950的。此代码效果是用基础版店铺测试的,在专业版会出现不居中的情况,各位用于专业版的自行调整一下偏移值哈!

    代码如下:
    1. <div style="height:600px;">
    2.   <div class="footer-more-trigger" style="left:50%;width:950px;height:600px;right:auto;top:auto;padding:0;border:none;z-index:1;">
    3.     <div class="footer-more-trigger" style="width:950px;height:600px;right:auto;left:-576px;top:0px;border:none;padding:0;">
    4. <!--bd begin-->
    5. <div style="width:950px; height:600px;">
    6.   <!--header begin-->
    7.   <div style="width:950px; height:40px; overflow:hidden;" data-title="屌丝沟沟:372626297">
    8.     <h3 style=" width:80px; height:30px; line-height:30px; color:#2f2f2f; font-weight:bold; float:left; margin:0;font-size:16px;">进口食品</h3>
    9.     <ul style="float:right; margin:0; padding:0; list-style:none; margin-top:15px;">
    10.       <li style="float:left; padding:0 1em; font-size:12px; border-right:#e5e5e5 solid 1px;"><a href="#" target="_blank" style="text-decoration:none;  color:#e8374d;">进口巧克力</a></li>
    11.       <li style="float:left; padding:0 1em; font-size:12px; border-right:#e5e5e5 solid 1px;"><a href="#" target="_blank" style="text-decoration:none; color:#666;">宅家零食</a></li>
    12.       <li style="float:left; padding:0 1em; font-size:12px;"><a href="#" target="_blank" style="text-decoration:none; color:#666;">低价 健康牛奶</a></li>
    13.     </ul>
    14.     <hr style="width:948px; height:1px; float:left; background-color:#000; margin:0; border:#000 solid 1px; margin-top:7px;" />
    15.   </div>
    16.   <!--header end-->
    17.   <!--content begin-->
    18.   <div style="width:948px; height:558px;">
    19.     <!--left begin-->
    20.     <div style="width:240px; height:556px; float:left; background:#ff9228;">
    21.       <div class="pagination" style="width:220px; height:200px; padding:30px 0 30px 20px; float:none;">
    22.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    23. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">饼干糕点</a>
    24.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    25. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">雪之恋</a>
    26.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    27. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">进口牛奶
    28.            <i class="footer-more-trigger" style="width:21px; height:12px; padding:0; border:0; top:auto; left:auto; background:url(http://g.tbcdn.cn/tm/chaoshi/1.2.0/img/hot.png) no-repeat;"></i>
    29.         </a>
    30.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    31. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">瑞士莲
    32.            <i class="footer-more-trigger" style="width:21px; height:12px; padding:0; border:0; top:auto; left:auto; background:url(http://g.tbcdn.cn/tm/chaoshi/1.2.0/img/hot.png) no-repeat;"></i>
    33.         </a>
    34.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    35. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">莱家</a>
    36.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    37. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">咖啡冲饮</a>
    38.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    39. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">果干蜜饯</a>
    40.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    41. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">方便面</a>
    42.         <a href="#" target="_blank" style="width:56px; height:56px; font-size:12px; border:0; border-radius:56px;

    43. text-align:center; line-height:56px; text-decoration:none; margin:0 10px 10px 0; padding:0;">橄榄油</a>
    44.         </div>
    45.           <div style="width:240px; height:296px; padding:0;">
    46.            <a href="#" target="_blank"><img src="http://img04.taobaocdn.com/imgextra/i4/1029724140/TB29eKAcXXXXXXDXXXXXXXXXXXX_!!1029724140.jpg" alt="" width="240" height="296"></a>
    47.       </div>
    48.     </div>
    49.     <!--left end-->
    50.     <!--right begin-->
    51.     <div style="width:708px; height:562px; float:left;"  data-title="【我是代码你无须十年八年功力 依家我系度 你想点就点】">
    52.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    53.         <div style="margin:13px;">
    54.           <img src="http://img04.taobaocdn.com/imgextra/i4/1029724140/TB2SXmucXXXXXclXpXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    55.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【特级精选可可脂】</h4>
    56.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">进口瑞士莲Lindt特级排装70%可可黑巧克力100g</p>
    57.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥32</p>
    58.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>29</p>
    59.         </div>
    60.       </a>
    61.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    62.         <div style="margin:13px;">
    63.           <img src="http://img02.taobaocdn.com/imgextra/i2/1029724140/TB2nRGxcXXXXXc9XXXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    64.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【经典丹麦曲奇】</h4>
    65.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;"> 印尼进口饼干 Danisa/皇冠丹麦曲奇饼干908g/礼盒装</p>
    66.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥110</p>
    67.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>83</p>
    68.         </div>
    69.       </a>
    70.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    71.         <div style="margin:13px;">
    72.           <img src="http://img03.taobaocdn.com/imgextra/i3/1029724140/TB2NqmxcXXXXXXZXpXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    73.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【早餐好伴侣】</h4>
    74.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">越南进口 利葡LIPO 牛奶白巧克力面包干 300g 食品</p>
    75.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥21</p>
    76.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>13.2</p>
    77.         </div>
    78.       </a>
    79.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    80.         <div style="margin:13px;">
    81.           <img src="http://img01.taobaocdn.com/imgextra/i1/1029724140/TB2x_uxcXXXXXcQXXXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    82.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【鸡汤味5连包】</h4>
    83.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">新加坡进口KOKA可口鸡汤面条健康方便面85g*5速食面</p>
    84.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥18</p>
    85.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>15.5</p>
    86.         </div>
    87.       </a>
    88.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    89.         <div style="margin:13px;">
    90.           <img src="http://img01.taobaocdn.com/imgextra/i1/1029724140/TB2tN9wcXXXXXavXpXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    91.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【西班牙进口】</h4>
    92.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">西班牙进口饼干 谷优消化饼特惠装 400g*3+200g</p>
    93.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥59.9</p>
    94.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>29.9</p>
    95.         </div>
    96.       </a>
    97.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    98.         <div style="margin:13px;">
    99.           <img src="http://img01.taobaocdn.com/imgextra/i1/1029724140/TB2gKOAcXXXXXXBXXXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    100.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【德国进口】</h4>
    101.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">德国原装进口 古立特黑啤酒500mL*6听 纯麦酿造</p>
    102.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥100.8</p>
    103.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>42</p>
    104.         </div>
    105.       </a>
    106.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    107.         <div style="margin:13px;">
    108.           <img src="http://img02.taobaocdn.com/imgextra/i2/1029724140/TB2nPivcXXXXXa7XpXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    109.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【海苔4连包】</h4>
    110.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">韩国进口 海牌 海苔4连包 2g*10*4 家庭分享装</p>
    111.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥53.9</p>
    112.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>39.9</p>
    113.         </div>
    114.       </a>
    115.       <a href="#" target="_blank" style="width:176px; height:278px; display:block; float:left; border-right:#e7e7e7 solid 1px; margin-right:-1px; text-decoration:none;">
    116.         <div style="margin:13px;">
    117.           <img src="http://img03.taobaocdn.com/imgextra/i3/1029724140/TB2.l9vcXXXXXbaXpXXXXXXXXXX_!!1029724140.jpg" alt="" width="150" height="150">
    118.           <h4 style="font-size:10px; margin:8px 0 0 0; color:#2f2f2f;">【峰生水起之林】</h4>
    119.           <p style="color:#666; overflow:hidden; margin:4px 0 0 0; height:18px; font-size:10px; text-overflow:ellipsis;_width:100%;">我家特产 巧克力榛果威化T30粒送情侣</p>
    120.           <p style="margin:10px 0 0 0; color:#999; text-decoration:line-through; font-size:10px; font-family:arial;">¥9999</p>
    121.           <p style="margin:4px 0 0 0; font-family:arial; color:#2f2f2f; font-weight:bold;font-size: 18px;"><i style="font-style:normal; vertical-align:top; font-size:9px;">¥</i>521314</p>
    122.         </div>
    123.       </a>
    124.     </div>
    125.     <!--right end-->
    126.   </div>
    127.   <!--content end-->
    128. </div>
    129. <!--bd end-->
    130.     </div>
    131.   </div>
    132. </div>
    复制代码





    评分

    参与人数 3美工币 +50 收起 理由
    戴氏 + 20 很给力!
    淘美阿花 + 10 很给力!
    小猪哥 + 20 辛苦啦!

    查看全部评分

    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情
    抱抱
    昨天 19:29
  • 签到天数: 588 天

    连续签到: 4 天

    [LV.9]已臻大成

    3

    主题

    356

    帖子

    10万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    109377

    最佳新人热心会员

    发表于 2015-3-21 23:04:17 | 显示全部楼层
    大爱 搜藏了

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


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

  • TA的每日心情
    大哭
    2015-1-23 13:46
  • 签到天数: 38 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    113

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    66547

    最佳新人热心会员天猫美工淘宝金冠店美工淘宝皇冠店美工淘宝钻级店美工

    发表于 2015-3-21 23:05:23 | 显示全部楼层
    沙发,给赞!收藏啦!
    鄙人小铺 ,欢迎光临!http://d-wei.taobao.com/
  • TA的每日心情
    大哭
    2016-5-10 10:48
  • 签到天数: 315 天

    连续签到: 1 天

    [LV.8]自成一派

    4

    主题

    182

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    76882

    最佳新人

    发表于 2015-3-21 23:10:28 | 显示全部楼层
    前排,谢谢分享,很屌哟~~~

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


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

  • TA的每日心情
    抱抱
    前天 08:36
  • 签到天数: 464 天

    连续签到: 1 天

    [LV.9]已臻大成

    11

    主题

    164

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    64111

    发表于 2015-3-21 23:45:15 | 显示全部楼层
    大哥你落后了,我店铺天猫早就仿天猫超市全局了,http://muyuansp.tmall.com

    点评

    额 你们也太牛B了,这也仿得一模二个样了吧  发表于 2015-3-22 00:11

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


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

  • TA的每日心情
    吐舌头
    2015-12-13 21:30
  • 签到天数: 60 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    242

    帖子

    8268

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8268

    发表于 2015-3-22 09:38:11 | 显示全部楼层
    一看到那么多代码,就头疼

    点评

    呵呵 其实我也快要萌了  发表于 2015-3-22 10:06

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


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

  • TA的每日心情

    2015-4-9 16:21
  • 签到天数: 105 天

    连续签到: 1 天

    [LV.6]渐入佳境

    6

    主题

    133

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    20390

    最佳新人热心会员

    发表于 2015-3-22 10:01:25 | 显示全部楼层
    表示复制到我的店铺里提示图片为他人的 不能用啊

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


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

  • TA的每日心情
    加油
    2016-2-28 16:47
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]登堂入室

    7

    主题

    199

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23916

    发表于 2015-3-22 10:06:57 | 显示全部楼层
    谢谢分享,不过我不懂代码。。

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


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

  • TA的每日心情

    6 天前
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
     楼主| 发表于 2015-3-22 10:09:16 | 显示全部楼层
    huhanqingg 发表于 2015-3-22 10:01
    表示复制到我的店铺里提示图片为他人的 不能用啊

    不知道淘宝又搞了神马动作,我直接用天猫超市中的图片都也是这样子提示的,后来直接上传自个空间测试的

    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情

    6 天前
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
     楼主| 发表于 2015-3-22 10:10:21 | 显示全部楼层
    尧可馨 发表于 2015-3-22 10:06
    谢谢分享,不过我不懂代码。。

    没事,多看看 接触一下就懂了

    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-7 02:01 , Processed in 0.135740 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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