加载中…
正文 字体大小:

如何去除新旺铺模块之间10像素的空隙

(2017-05-14 20:20:50)
标签:

365

和大家分享一个淘宝高级装修技巧,教你如何去除”新旺铺上下模块之间10像素的空隙“。准确的说,新旺铺专业版系统自带的第一套模板,各个模块上下之间的距离为20像素,但第二、第三套模板,距离却是10像素。此技巧主要针对第一套模板,第二、第三套模板虽然也可以用,但却没有第一套那么方便。

之前我曾经说过一种方法,在模块中加入”position:relative;top:-20px;“,我也不知道当时是怎么想的,怎么会犯这么低级的错误!这根本就是不可能实现的!relative只是个相对定位,相对于正常位置定位,并未脱离文档流,不脱离文档流又怎么可能突破模块的界限!所以,我们要使用的定位属性是absolute绝对定位,脱离文档流,相对于浏览器窗口进行定位。但很遗憾的是,淘宝对自定义只支持相对定位,却不支持绝对定位,在自定义内输入绝对定位属性,都将被自动过滤。

但我们要想去除上下模块之间的空隙,又必须要用到absolute绝对定位,那该怎么办呢?我能想到的有两种方法,一种查找模板CSS,找到使用了绝对定位属性的类,但这种方法效率是非常低的;另一种方法是借助Widget组件,这种方法我也是今晚无意中发现的,原来借助Widget组件里的Carousel旋转木马,同样可以拿到absolute绝对定位。

 


  1. <</span>div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls': 'bbs-taobaoux-com-con','navCls': 'bbs-taobaoux-com-nav','effect': 'fade'}"> 
  2.     <</span>div class="bbs-taobaoux-com-con" style="width:950px;height:100px;"> 
  3.         <</span>div style="width:950px;top: -20px;"> 
  4.                          
  5.         div> 
  6.     div> 
  7.     <</span>div class="bbs-taobaoux-com-nav" style="display:none;">div> 
  8. div> 

 

代码解释:

  • class="bbs-taobaoux-com-nav"  轮播导航列表,设置display:none的作用是隐藏导航区,禁止出现1、2、3这些导航数值;
  • class="bbs-taobaoux-com-con"  轮播内容列表,必须定义模块宽度与高度;
  • style="width:950px;height:100px;"  模块的宽度与高度,比如你的模块尺寸是950px*500px,那这里就应该改为style="width:950px;height:480px;",为什么高度是480了?因为向上移动了20个像素。
  • top:-20px; 向上移动20个像素,完美去除上下模块之间20像素的空隙。这时,应该还需要加上一个z-index属性,把模块置于顶层,但事实上我们不用多此一举,系统会自动加上这个属性。


以上是第一套模板的修改方法,第二、第三套模板的修改方法稍微有点麻烦。你必须清楚的知道,前面一个模块的高度,比如前面一个模块的高度是500px,那top:-20px就应该改为top:490px;

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有