和大家分享一個淘寶高級裝修技巧，教你如何去除”新旺鋪上下模塊之間10像素的空隙“。準(zhǔn)確的說，新旺鋪專業(yè)版系統(tǒng)自帶的第一套模板，各個模塊上下之間的距離為20像素，但第二、第三套模板，距離卻是10像素。此技巧主要針對第一套模板，第二、第三套模板雖然也可以用，但卻沒有第一套那么方便。
之前我曾經(jīng)說過一種方法，在模塊中加入”position:relative;top:-20px;“，我也不知道當(dāng)時是怎么想的，怎么會犯這么低級的錯誤！這根本就是不可能實(shí)現(xiàn)的！relative只是個相對定位，相對于正常位置定位，并未脫離文檔流，不脫離文檔流又怎么可能突破模塊的界限！所以，我們要使用的定位屬性是absolute絕對定位，脫離文檔流，相對于瀏覽器窗口進(jìn)行定位。但很遺憾的是，淘寶對自定義只支持相對定位，卻不支持絕對定位，在自定義內(nèi)輸入絕對定位屬性，都將被自動過濾。
但我們要想去除上下模塊之間的空隙，又必須要用到absolute絕對定位，那該怎么辦呢？我能想到的有兩種方法，一種查找模板CSS，找到使用了絕對定位屬性的類，但這種方法效率是非常低的；另一種方法是借助Widget組件，這種方法我也是今晚無意中發(fā)現(xiàn)的，原來借助Widget組件里的Carousel旋轉(zhuǎn)木馬，同樣可以拿到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"輪播導(dǎo)航列表，設(shè)置display:none的作用是隱藏導(dǎo)航區(qū)，禁止出現(xiàn)1、2、3這些導(dǎo)航數(shù)值；
- class="bbs-taobaoux-com-con"輪播內(nèi)容列表，必須定義模塊寬度與高度；
- style="width:950px;height:100px;"模塊的寬度與高度，比如你的模塊尺寸是950px*500px，那這里就應(yīng)該改為style="width:950px;height:480px;"，為什么高度是480了？因為向上移動了20個像素。
- top:-20px; 向上移動20個像素，完美去除上下模塊之間20像素的空隙。這時，應(yīng)該還需要加上一個z-index屬性，把模塊置于頂層，但事實(shí)上我們不用多此一舉，系統(tǒng)會自動加上這個屬性。
以上是第一套模板的修改方法，第二、第三套模板的修改方法稍微有點(diǎn)麻煩。你必須清楚的知道，前面一個模塊的高度，比如前面一個模塊的高度是500px，那top:-20px就應(yīng)該改為top:490px；
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
本文來源： 如何去除新旺鋪模塊之間10像素的空隙
