淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2184|回复: 12
收起左侧

[装修相关] 请问三只松鼠这种导航栏怎么做的?

[复制链接]
  • TA的每日心情
    不爽
    2015-4-15 15:01
  • 签到天数: 10 天

    连续签到: 1 天

    [LV.3]武林新秀

    3

    主题

    10

    帖子

    5074

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5074

    发表于 2015-4-8 09:23:20 | 显示全部楼层 |阅读模式
    100美工币


    请问三只松鼠这种导航栏怎么做的?

    请问三只松鼠这种导航栏怎么做的?

    最佳答案

    查看完整内容

    提取后改了一些,拿去换图换字应该能用 放店招 放店尾

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


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

  • TA的每日心情
    加油
    昨天 19:48
  • 签到天数: 1103 天

    连续签到: 4 天

    [LV.10]功行圆满

    11

    主题

    714

    帖子

    28万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    280048

    发表于 2015-4-8 09:23:21 | 显示全部楼层
    提取后改了一些,拿去换图换字应该能用

    放店招
    1. <div class="banner-box">
    2.   <div style="width:990px;margin:0 auto;">
    3.     <div style="height:120px;"> <a href="#"  class="follow-btn j_CollectBrand" ><img style="float:left;" src="http://img.alicdn.com/imgextra/i2/880734502/TB2U6M3cXXXXXXBXpXXXXXXXXXX-880734502.jpg"></a> <img style="float:left;" src="http://img.alicdn.com/imgextra/i3/880734502/TB2pjk2cXXXXXXBXpXXXXXXXXXX-880734502.jpg"> <img style="float:left;" src="http://img.alicdn.com/imgextra/i4/880734502/TB2EQJmcpXXXXbeXpXXXXXXXXXX-880734502.jpg"> <img src="http://img.alicdn.com/imgextra/i4/880734502/TB2rfJpcpXXXXc.XXXXXXXXXXXX-880734502.jpg" usemap="#Map" style="float:left;" border="0">
    4.       <map name="Map">
    5.         <area coords="55,6,135,111" href="#" target="_blank"  >
    6.         <area coords="141,8,213,108" href="#" target="_blank"  >
    7.       </map>
    8.     </div>
    9.     <div style="height:30px;background:url(http://img.alicdn.com/imgextra/i1/880734502/TB2uLM0cXXXXXbEXpXXXXXXXXXX-880734502.jpg);width:990px;color:#FFF;text-align:center;line-height:30px;font-family:microsoft yahei;font-size:15px;">
    10.       <div style="width:715px;float:left;"> <a title="松鼠窝" href="#" target="_blank" style="display:inline-block;height:30px;width:70px;float:left;color:#FFF;text-decoration:none;"  >松鼠窝</a> <a title="所有美食" class="js1" href="#" target="_blank" style="display:inline-block;height:30px;width:85px;float:left;color:#FFF;text-decoration:none;"  >所有美食▼</a> <a title="松鼠口袋" href="#" target="_blank" style="display:inline-block;height:30px;width:100px;float:left;color:#FFF;text-decoration:none;"  >松鼠口袋</a> <a title="新疆正品" href="#" target="_blank" style="display:inline-block;height:30px;width:80px;float:left;color:#FFF;text-decoration:none;"  >新疆正品</a> <a title="坚果盛宴" href="#" target="_blank" style="display:inline-block;height:30px;width:100px;float:left;color:#FFF;text-decoration:none;"  >坚果盛宴<b class="hotimg" style="background:url(http://img.alicdn.com/imgextra/i4/880734502/TB2VnF9bFXXXXbFXXXXXXXXXXXX-880734502.gif) no-repeat;width:32px;height:21px;"></b></a> <a title="松鼠动漫" href="#" target="_blank" style="display:inline-block;height:30px;width:80px;float:left;color:#FFF;text-decoration:none;"  >松鼠动漫</a> <a title="茶零食品牌" class="js5" href="#" target="_blank" style="display:inline-block;height:30px;width:105px;float:left;color:#FFF;text-decoration:none;"  >茶零食品牌▼</a> <a title="关于松鼠" class="js2" href="#" target="_blank" style="display:inline-block;height:30px;width:90px;float:left;color:#FFF;text-decoration:none;"  >关于松鼠▼</a> </div>
    11.       <div style="width:275px;float:right;">
    12.         <form action="http://sanzhisongshu.tmall.com/?&&&&&&&&&&&&&&&&&&&&&&scene=taobao_shop" method="post" name="searchform" style="opacity:0.5;height:35px;float:left;" target="_blank">
    13.           <input name="userId" type="hidden">
    14.           <input value="57300442" name="shopId" type="hidden">
    15.           <input name="view_type" type="hidden">
    16.           <input name="order_type" type="hidden">
    17.           <input value="y" name="search" type="hidden">
    18.           <input style="border-bottom:medium none;text-align:left;border-left:medium none;line-height:17px;padding-left:9px;width:100px;background:none transparent scroll repeat 0% 0%;float:left;height:25px;color:#AF2E29;overflow:hidden;border-top:medium none;border-right:medium none;width:90px;height:25px;" value="碧根果" name="keyword">
    19.           <input style="border-bottom:medium none;border-left:medium none;width:33px;background:none transparent scroll repeat 0% 0%;float:left;height:30px;border-top:medium none;cursor:pointer;border-right:medium none;" value="" type="submit">
    20.            
    21.         </form>
    22.         <span style="float:left;font-size:12px;color:#FFF;line-height:28px;">热搜:<a style="color:#FFF;" href="#" target="_blank"  >夏威夷果</a>| <a style="color:#FFF;" href="#" target="_blank"  >松子</a></span> </div>
    23.     </div>
    24.   </div>
    25. </div>
    复制代码
    放店尾
    1. <div data-widget-type="Popup" data-widget-config="{ 'trigger':'.js1','align':{ 'node':'.js1', 'offset':[0,0], 'points':['bl','tl']}}" class="J_TWidget" style="display: none;">
    2.   <div style="width: 160px;background: #F6F4E9;border-bottom: 3px solid #DAD7C0;overflow: hidden;">
    3.     <ul>
    4.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px; margin-top:10px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 坚果炒货专场 </a> </li>
    5.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px; text-align:center; "> <a href="#" style="color:#000;" target="_blank">> 新疆干果专场 </a> </li>
    6.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 年货礼包专场 </a> </li>
    7.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 花茶美容专场 </a> </li>
    8.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 松鼠小贱零食店</a> </li>
    9.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 松鼠小美茶品牌</a> </li>
    10.     </ul>
    11.   </div>
    12. </div>
    13. <div data-widget-type="Popup" data-widget-config="{'trigger':'.js5', 'align':{  'node':'.js5',  'offset':[0,0],'points':['bl','tl']}}" class="J_TWidget" style="display: none;">
    14.   <div style="width: 160px;background: #F6F4E9;border-bottom: 3px solid #DAD7C0;overflow: hidden;">
    15.     <ul>
    16.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px; margin-top:10px;margin-bottom: 5px;margin-left:10px;margin-right: 10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 松鼠小美茶品牌 </a> </li>
    17.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px; margin-top:10px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 松鼠小贱零食品牌</a> </li>
    18.     </ul>
    19.   </div>
    20. </div>
    21. <div data-widget-type="Popup" data-widget-config="{'trigger':'.js2', 'align':{  'node':'.js2',  'offset':[0,0],'points':['bl','tl']}}" class="J_TWidget" style="display: none;">
    22.   <div style="width: 160px;background: #F6F4E9;border-bottom: 3px solid #DAD7C0;overflow: hidden;">
    23.     <ul>
    24.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px; margin-top:10px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 品牌故事</a> </li>
    25.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px; text-align:center; "> <a href="#" style="color:#000;" target="_blank">> 松鼠公益</a> </li>
    26.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 极速物流</a> </li>
    27.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 服务须知</a> </li>
    28.       <li style="border-bottom: 1px solid #C5C0B6;font-size: 13px;height: 26px;line-height: 24px;margin-bottom: 5px;margin-left:10px;margin-right:10px;width: 140px;  text-align:center;"> <a href="#" style="color:#000;" target="_blank">> 购物攻略</a> </li>
    29.     </ul>
    30.   </div>
    31. </div>
    复制代码



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


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

    回复

    使用道具 举报

  • TA的每日心情

    2016-7-22 16:27
  • 签到天数: 209 天

    连续签到: 1 天

    [LV.7]炉火纯青

    11

    主题

    179

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    26657

    淘宝皇冠店美工最佳新人

    发表于 2015-4-8 09:29:49 | 显示全部楼层
    弹弹弹出层吧!!

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


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

    回复

    使用道具 举报

  • TA的每日心情
    吐舌头
    昨天 09:30
  • 签到天数: 785 天

    连续签到: 6 天

    [LV.10]功行圆满

    13

    主题

    1408

    帖子

    16万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    168059

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

    发表于 2015-4-8 09:32:14 | 显示全部楼层
    我是打酱油的,坐等大神回复

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


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

    回复

    使用道具 举报

  • TA的每日心情
    不爽
    2016-12-2 12:01
  • 签到天数: 139 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    53

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24363

    发表于 2015-4-8 09:38:50 | 显示全部楼层
    导航下拉菜单,都是用弹出代码写的,

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


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

    回复

    使用道具 举报

  • TA的每日心情
    吐舌头
    2016-6-13 17:17
  • 签到天数: 648 天

    连续签到: 1 天

    [LV.9]已臻大成

    8

    主题

    1070

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    131586

    淘宝皇冠店美工天猫美工最佳新人热心会员宣传达人

    发表于 2015-4-8 10:22:12 | 显示全部楼层
    主要是弹出层   
    其实 用 盛夏布局  好像也能实现的吧  
    “开门 查水表”…… “水表在外面”…… “我是顺风快递的 有你的包裹”…… “我没 买过东西。你送错了”…… “我们公司搞了 个活动你是我们公司的幸运客户中
    回复

    使用道具 举报

  • TA的每日心情
    臭美
    2016-6-2 11:53
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    6

    主题

    171

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27657

    QQ
    发表于 2015-4-8 10:58:19 | 显示全部楼层
    弹出层做的!!
    回复

    使用道具 举报

  • TA的每日心情
    抱抱
    2016-11-29 09:41
  • 签到天数: 141 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    475

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    21208

    发表于 2015-4-8 11:57:39 | 显示全部楼层

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


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

    回复

    使用道具 举报

  • TA的每日心情
    抱抱
    昨天 08:30
  • 签到天数: 680 天

    连续签到: 7 天

    [LV.9]已臻大成

    26

    主题

    2632

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    185961

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

    QQ
    发表于 2015-4-9 09:07:07 | 显示全部楼层
    我就看看
    QQ交流群  107102001
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    4

    帖子

    1696

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1696

    发表于 2015-4-13 17:18:19 | 显示全部楼层
    本帖最后由 某一家 于 2015-4-13 17:21 编辑
    X_in 发表于 2015-4-8 09:23
    提取后改了一些,拿去换图换字应该能用

    放店招

    大神,放在页尾无效啊,求教。放在自定义倒是能凑合

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


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

    回复

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2016-12-11 12:17 , Processed in 0.153219 second(s), 36 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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