2014-03-09 02:04:48
2014-03-09 02:04:48
和大家分享一个淘宝高级装修技巧,教你如何去除”新旺铺上下模块之间10像素的空隙“。准确的说,新旺铺专业版系统自带的第一套模板,各个模块上下之间的距离为20像素,但第二、第三套模板,距离却是10像素。此技巧主要针对第一套模板,第二、第三套模板虽然也可以用,但却没有第一套那么方便。
之前我曾经说过一种方法,在模块中加入”position:relative;top:-20px;“,我也不知道当时是怎么想的,怎么会犯这么低级的错误!这根本就是不可能实现的!relative只是个相对定位,相对于正常位置定位,并未脱离文档流,不脱离文档流又怎么可能突破模块的界限!所以,我们要使用的定位属性是absolute绝对定位,脱离文档流,相对于浏览器窗口进行定位。但很遗憾的是,淘宝对自定义只支持相对定位,却不支持绝对定位,在自定义内输入绝对定位属性,都将被自动过滤。
但我们要想去除上下模块之间的空隙,又必须要用到absolute绝对定位,那该怎么办呢?我能想到的有两种方法,一种查找模板CSS,找到使用了绝对定位属性的类,但这种方法效率是非常低的;另一种方法是借助Widget组件,这种方法我也是今晚无意中发现的,原来借助Widget组件里的Carousel旋转木马,同样可以拿到absolute绝对定位。
- <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{\'contentCls\': \'bbs-taobaoux-com-con\',\'navCls\': \'bbs-taobaoux-com-nav\',\'effect\': \'fade\'}">
- <div class="bbs-taobaoux-com-con" style="width:950px;height:100px;">
- <div style="width:950px;top: -20px;">
- /*这里输入你的模块内容*/
- div>
- div>
- <div class="bbs-taobaoux-com-nav" style="display:none;">div>
- div>
代码解释:
>> 查看更多相似文章