和大家分享一个淘宝高级装修技巧，教你如何去除”新旺铺上下模块之间10像素的空隙“。准确的说，新旺铺专业版系统自带的第一套模板，各个模块上下之间的距离为20像素，但第二、第三套模板，距离却是10像素。此技巧主要针对第一套模板，第二、第三套模板虽然也可以用，但却没有第一套那么方便。
之前我曾经说过一种方法，在模块中加入”position:relative;top:-20px;“，我也不知道当时是怎么想的，怎么会犯这么低级的错误！这根本就是不可能实现的！relative只是个相对定位，相对于正常位置定位，并未脱离文档流，不脱离文档流又怎么可能突破模块的界限！所以，我们要使用的定位属性是absolute绝对定位，脱离文档流，相对于浏览器窗口进行定位。但很遗憾的是，淘宝对自定义只支持相对定位，却不支持绝对定位，在自定义内输入绝对定位属性，都将被自动过滤。
但我们要想去除上下模块之间的空隙，又必须要用到absolute绝对定位，那该怎么办呢？我能想到的有两种方法，一种查找模板CSS，找到使用了绝对定位属性的类，但这种方法效率是非常低的；另一种方法是借助Widget组件，这种方法我也是今晚无意中发现的，原来借助Widget组件里的Carousel旋转木马，同样可以拿到absolute绝对定位。
- <divclass="J_TWidget"data-widget-type="Carousel"data-widget-config="{'contentCls':'bbs-taobaoux-com-con','navCls':'bbs-taobaoux-com-nav','effect':'fade'}">
- <divclass="bbs-taobaoux-com-con"style="width:950px;height:100px;">
- <divstyle="width:950px;top:-20px;">
- </div>
- </div>
- <divclass="bbs-taobaoux-com-nav"style="display:none;"></div>
- </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；
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源： 如何去除新旺铺模块之间10像素的空隙
