淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1763|回复: 8
收起左侧

导航下拉弹出分类+导航栏自定义搜索+去掉两模块间空白距离

[复制链接]
  • TA的每日心情
    委屈
    2016-5-16 15:40
  • 签到天数: 7 天

    连续签到: 1 天

    [LV.3]武林新秀

    3

    主题

    5

    帖子

    2037

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2037

    发表于 2016-3-18 11:38:02 | 显示全部楼层 |阅读模式
    我们的秘密花园.gif
    预览地址:https://catef.taobao.com


    放在店招自定义
    1. <!-- 放在店招自定义 -->

    2. <div style="float:left;margin-left:432px;text-align:center; height:105px;font-family:impact;margin-top:15px;">
    3.        <img src="//gdp.alicdn.com/imgextra/i1/672358611/TB22fRNkFXXXXaCXXXXXXXXXXXX_!!672358611.png" alt=" 矢量智能对象.png" />
    4.     </div>
    5. <div style=" width:950px;float:left;">
    6. <table id="__01" width="700" height="" border="0" cellpadding="0" cellspacing="0" style=" float:left;">
    7.   <tr style=" width:700px;  line-height:30px; height:30px; text-align:center;">
    8.    
    9.     <td width="78" height="30" ><a  target="new" style="font-family:microsoft yahei;font-size:12px;color:#302718;">首页</a></td>
    10.     <td width="108" height="30" class="shouye"><a href="#" target="new" style="font-family:microsoft yahei;font-size:12px;color:#302718;">所有宝贝</a></td>
    11.     <td width="78" height="30" class="wenxiong"><a href="#" target="new" style="font-family:microsoft yahei;font-size:12px;color:#302718;">文胸</a> </td>
    12.     <td width="108" height="30" class="baobei"><a href="#" target="new" style="font-family:microsoft yahei;font-size:12px;color:#302718;">塑身/丰臀</a> </td>
    13.     <td width="108" height="30" class="baobei"><a href="#" target="new" style="font-family:microsoft yahei;font-size:12px;color:#302718;">性感睡衣</a> </td>
    14.     <td width="108" height="30" class="naicha"> <a href="#" target="new" style="font-family:microsoft yahei;font-size:12px;color:#302718;">购物须知</a></td>
    15.     <td></td>

    16.   </tr>
    17.   

    18. </table>
    19. <!-- 自定义搜索 -->
    20. <div style="width:250px;float:right;overflow:hidden;margin-top:4px;margin-right:0px;">
    21.     <div class="tb-module">
    22.       <div style="width:250px;float:left;" class="um-rw950 um-cat um-m">
    23.         <div class="um-bd">
    24.           <div style="float:left;" class="um-querywarp">
    25.             <div style="float:left;" class="um-query">
    26.               <div class="um-form">
    27.                 <form method="post" name="SearchForm" action="//catef.taobao.com/?scene=taobao_shop" target="_blank">
    28.                    <input type="hidden" name="userId" /> <input value="58730116" type="hidden" name="shopId" /> <input value="_hotsell" type="hidden" name="orderType" /> <input value="grid" type="hidden" name="viewType" /> <input type="hidden" name="baobei_type" /> <input value="y" type="hidden" name="search" /> <input style="border-bottom:#C5C5C7 1px solid;border-left:#C5C5C7 1px solid;line-height:20px;text-indent:5px;width:160px;font-family:微软雅黑;background:#FFF;float:left;height:20px;color:#767671;margin-left:35px;border-top:#C5C5C7 1px solid;margin-right:3px;border-right:#C5C5C7 1px solid;" class="um-keyword" value="文胸套装" name="keyword" /><button style="border-bottom:#302718 1px solid;text-align:center;border-left:#302718 1px solid;line-height:20px;width:50px;display:block;font-family:微软雅黑;background:#302718;height:22px;color:#fff;border-top:#302718 1px solid;cursor:pointer;border-right:#302718 1px solid;" class="um-submit" title="点击搜索..." type="submit">搜索</button>
    29.                 </form>
    30.               </div>
    31.             </div>
    32.           </div>
    33.         </div>
    34.       </div>
    35.     </div>
    36.   </div>
    37.     </div>
    复制代码
    在banner上面建一个自定义把下面代码放在里面
    1. <!-- 在banner上面建一个自定义把下面代码放在里面 -->
    2. <!--所有宝贝弹出-->
    3. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    4.           'trigger':'.shouye',
    5.           'align':{
    6.                   'node':'.shouye',
    7.                   'offset':[0,0],
    8.                   'points':['bc','tc']
    9.                   }
    10.             }">
    11.     <div style="height: 143px; width: 100px; background:#fff; border:1px #707070 solid;">
    12.       <ul style=" margin:0px; padding:0px;">
    13.            <li style=" list-style-type:none; line-height:35px; height:35px; width:100px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">按新品</a></li>
    14.            <li style=" list-style-type:none; line-height:35px; height:35px; width:100px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">按销量</a></li>
    15.            <li style=" list-style-type:none; line-height:35px; height:35px; width:100px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">按人气</a></li>
    16.            <li style=" list-style-type:none; line-height:35px; height:35px; width:100px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">按价格</a></li>
    17.         </ul>
    18.     </div>
    19. </div>
    20. <!--end-->

    21. <!--文胸分类弹出-->
    22. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    23.           'trigger':'.wenxiong',
    24.           'align':{
    25.                   'node':'.wenxiong',
    26.                   'offset':[0,0],
    27.                   'points':['bc','tc']
    28.                   }
    29.             }">
    30.     <div style="height: 178px; width: 140px; background:#fff; border:1px #707070 solid;">
    31.       <ul style=" margin:0px; padding:0px;">
    32.            <li style=" list-style-type:none; line-height:35px; height:35px; width:140px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">文胸套装</a></li>
    33.            <li style=" list-style-type:none; line-height:35px; height:35px; width:140px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">无痕内衣</a></li>
    34.            <li style=" list-style-type:none; line-height:35px; height:35px; width:140px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">小情趣 / 性感超薄 </a></li>
    35.            <li style=" list-style-type:none; line-height:35px; height:35px; width:140px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;border-bottom:1px dashed #d4d4d4;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">硅胶 / 隐形内衣</a></li>
    36.            <li style=" list-style-type:none; line-height:35px; height:35px; width:140px; text-align:center; color:#FFF; margin:0px; padding:0px; font-size:12px;"><a href="#" target="new" style=" color:#333;font-family:microsoft yahei;">连体塑身文胸</a></li>
    37.         </ul>
    38.     </div>
    39. </div>
    40. <!--end-->
    复制代码
    去掉模块间20px的距离
    1. <!-- 这里以高200为例,自己需要多少改下面的height:**px就可以了 -->
    2. <div style="height:180px;">
    3.     <div class="footer-more footer-more-trigger" style="width: 950px;height: 200px;right:auto;top:auto;padding:0;border:none;left:auto;z-index:1;background-color: transparent; ">
    4.         <div class="footer-more footer-more-trigger" style="left:0px;top:-20px;border:none;padding:0;background-color: transparent; ">
    5.             <!-- 内容 -->
    6.     </div>
    7.     </div>
    8. </div>
    复制代码





    补充内容 (2016-5-10 20:17):
    关于去掉模块间20px的距离代码,加进去之后看不到模块,无法删除的问题,是可以在布局管理里面删除的哦。

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


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

  • TA的每日心情
    大哭
    2016-3-29 11:51
  • 签到天数: 25 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    61

    主题

    697

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11301

    天猫美工

    QQ
    发表于 2016-3-18 11:51:35 | 显示全部楼层
    哎呦 这个不错~~~

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


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

  • TA的每日心情
    加油
    2016-11-4 21:06
  • 签到天数: 136 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    649

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23710

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2016-3-18 12:04:21 | 显示全部楼层
    我只懂的拔萝卜

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


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

  • TA的每日心情
    心跳
    2016-5-4 09:39
  • 签到天数: 63 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    494

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12595

    最佳新人热心会员

    QQ
    发表于 2016-3-18 17:32:20 | 显示全部楼层
    不错,收藏了
    痛并快乐着---祸兮,福之所倚,福兮,祸之所伏!相生相克,变幻无常!
  • TA的每日心情
    大哭
    2016-3-29 11:51
  • 签到天数: 25 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    61

    主题

    697

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11301

    天猫美工

    QQ
    发表于 2016-3-19 08:52:35 | 显示全部楼层
    如何把店招 字体底色变成黑色 字体变成白色?

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


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

  • TA的每日心情
    加油
    2016-11-4 21:06
  • 签到天数: 136 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    649

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23710

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2016-3-19 08:53:55 | 显示全部楼层
    早上起来灌灌水

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


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

  • TA的每日心情
    委屈
    2016-5-16 15:40
  • 签到天数: 7 天

    连续签到: 1 天

    [LV.3]武林新秀

    3

    主题

    5

    帖子

    2037

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2037

     楼主| 发表于 2016-3-19 12:42:43 | 显示全部楼层
    HANGE 发表于 2016-3-19 08:52
    如何把店招 字体底色变成黑色 字体变成白色?

    整体的背景颜色你换个页头背景就可以了。字体颜色变白,比如要把首页两字变成白色,找到这段代码的color改成如下:<td width="78" height="30" ><a  target="new" style="font-family:microsoft yahei;font-size:12px;color:#fff;">首页</a></td>其它的你直接套就可以了。




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


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

  • TA的每日心情
    吐舌头
    2016-3-22 11:14
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    0

    主题

    1

    帖子

    7735

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7735

    发表于 2016-3-21 20:24:11 | 显示全部楼层
    去掉模块间20px的距离 这代码,加进去,怎么无法删除了。看不到模块了,

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


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

    该用户从未签到

    0

    主题

    1

    帖子

    1490

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1490

    发表于 2016-3-26 17:35:06 | 显示全部楼层

    不错,收藏了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 06:25 , Processed in 0.126214 second(s), 22 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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