淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1327|回复: 1
收起左侧

[美工相关] 关于弹出层首页 去掉上面10间隙的问题

[复制链接]
  • TA的每日心情
    加油
    2016-10-27 09:57
  • 签到天数: 146 天

    连续签到: 1 天

    [LV.7]炉火纯青

    37

    主题

    310

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19677

    最佳新人热心会员淘宝金冠店美工

    QQ
    发表于 2015-4-17 21:38:07 | 显示全部楼层 |阅读模式
    大家请看下面的代码,这是我用来练习用的弹出层代码,实在盛夏做的,这段代码,固然好,但是,用两个自定义内容区做弹出层的话,上面的自定义内容区就会和下面自定义内容区产生   10间隙,  我试了一下把上面三个top:auto改成 top:-10px,但还是不行,
    产生间隙图示例


    代码
    1. <div style="height:100px;" class="sx_tools_code">
    2.   <div class="most-footer footer-more-trigger sx_abs" style="width:auto;border:none 0;padding:0;background-color:transparent;width:1550px;height:100px;border:none;padding:0;top:auto;left:auto;">
    3.     <div class="most-footer footer-more-trigger sx_abs" style="width:auto;border:none 0;padding:0;background-color:transparent;width:1550px;height:100px;left:-300px;top:auto;border:none;padding:0;overflow:hidden;">
    4.       <div class="sx_one most-footer footer-more-trigger sx_abs" style="width:auto;border:none 0;padding:0;background-color:transparent;height:100px;width:1550px;top:auto;left:auto;">
    5.         <div style="background-color:transparent;background-repeat:no-repeat;height:100px;width:1550px;position:relative;">
    6.            <a class="img_1_0_90625000_1429276183 most-footer footer-more-trigger sx_abs" target="_blank"  style="width:auto;border:none 0;padding:0;background-color:transparent;overflow:hidden;display:block;background:url(//gdp.alicdn.com/imgextra/i1/1035619195/TB25RzCcpXXXXXBXXXXXXXXXXXX_!!1035619195.jpg) no-repeat;left:0px;top:0px;width:700px;height:100px;z-index:1;"><img src="//gdp.alicdn.com/imgextra/i4/1862941194/T2a2R1XD0aXXXXXXXX-1862941194.png" style="width:700px;height:100px;" /></a>
    7.           <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ "trigger":".img_1_0_90625000_1429276183", "align":{"node":".img_1_0_90625000_1429276183","offset":[0,0],"points":["tl","tl"]} }" style="z-index:99;left:0px;top:0px;">
    8.              <a target="_blank" ><img src="//gdp.alicdn.com/imgextra/i1/1035619195/TB2oKLAcpXXXXa4XXXXXXXXXXXX_!!1035619195.jpg" /></a>
    9.           </div>
    10.            <a class="img_2_0_90625000_1429276183 most-footer footer-more-trigger sx_abs" target="_blank"  style="width:auto;border:none 0;padding:0;background-color:transparent;overflow:hidden;display:block;background:url(//gdp.alicdn.com/imgextra/i1/1035619195/TB2XRzAcpXXXXX.XXXXXXXXXXXX_!!1035619195.jpg) no-repeat;left:700px;top:0px;width:250px;height:100px;z-index:2;"><img src="//gdp.alicdn.com/imgextra/i4/1862941194/T2a2R1XD0aXXXXXXXX-1862941194.png" style="width:250px;height:100px;" /></a>
    11.           <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ "trigger":".img_2_0_90625000_1429276183", "align":{"node":".img_2_0_90625000_1429276183","offset":[0,0],"points":["tl","tl"]} }" style="z-index:99;left:700px;top:0px;">
    12.              <a target="_blank" ><img src="//gdp.alicdn.com/imgextra/i3/1035619195/TB2Jc2wcpXXXXXeXpXXXXXXXXXX_!!1035619195.jpg" /></a>
    13.           </div>
    14.            <a class="img_3_0_90625000_1429276183 most-footer footer-more-trigger sx_abs" target="_blank"  style="width:auto;border:none 0;padding:0;background-color:transparent;overflow:hidden;display:block;background:url(//gdp.alicdn.com/imgextra/i4/1035619195/TB2iWDxcpXXXXcCXXXXXXXXXXXX_!!1035619195.jpg) no-repeat;left:950px;top:0px;width:100px;height:100px;z-index:3;"><img src="//gdp.alicdn.com/imgextra/i4/1862941194/T2a2R1XD0aXXXXXXXX-1862941194.png" style="width:100px;height:100px;" /></a>
    15.           <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ "trigger":".img_3_0_90625000_1429276183", "align":{"node":".img_3_0_90625000_1429276183","offset":[0,0],"points":["tl","tl"]} }" style="z-index:99;left:950px;top:0px;">
    16.              <a target="_blank" ><img src="//gdp.alicdn.com/imgextra/i4/1035619195/TB26lvscpXXXXaRXpXXXXXXXXXX_!!1035619195.jpg" /></a>
    17.           </div>
    18.            <a class="img_4_0_90625000_1429276183 most-footer footer-more-trigger sx_abs" target="_blank"  style="width:auto;border:none 0;padding:0;background-color:transparent;overflow:hidden;display:block;background:url(//gdp.alicdn.com/imgextra/i2/1035619195/TB2VKPpcpXXXXciXpXXXXXXXXXX_!!1035619195.jpg) no-repeat;left:1050px;top:0px;width:500px;height:100px;z-index:4;"><img src="//gdp.alicdn.com/imgextra/i4/1862941194/T2a2R1XD0aXXXXXXXX-1862941194.png" style="width:500px;height:100px;" /></a>
    19.           <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ "trigger":".img_4_0_90625000_1429276183", "align":{"node":".img_4_0_90625000_1429276183","offset":[0,0],"points":["tl","tl"]} }" style="z-index:99;left:1050px;top:0px;">
    20.              <a target="_blank" ><img src="//gdp.alicdn.com/imgextra/i2/1035619195/TB2mQzqcpXXXXbWXpXXXXXXXXXX_!!1035619195.jpg" /></a>
    21.           </div>
    22.         </div>
    23.       </div>
    24.     </div>
    25.   </div>
    26. </div>
    复制代码



    QQ截图20150417213715.png

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


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

  • TA的每日心情
    抱抱
    2016-3-28 11:00
  • 签到天数: 30 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    59

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10116

    发表于 2015-4-20 03:24:16 | 显示全部楼层
      <div class="most-footer footer-more-trigger sx_abs" style="width:auto;border:none 0;padding:0;background-color:transparent;width:1550px;height:100px;left:-300px;top:auto;border:none;padding:0;overflow:hidden;">

    你明明就没有设置-10px       不要用盛夏吧  - -  sx_abs  这个暴露了  自己学学 用处大大
    解决方法 在你第三个DIV里面吧top:auto;改为top:-10px;

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 22:42 , Processed in 0.110888 second(s), 14 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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