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