做過(guò)淘寶或者天貓店鋪裝修的同志,肯定會(huì)經(jīng)常遇到一個(gè)很尷尬的問(wèn)題,就是為啥本地寫好的代碼,放店鋪里面就是不能全屏顯示呢,只能顯示950或者990像素寬度。(可能這個(gè)問(wèn)題很多人知道,不過(guò)考慮到很多人也許不知道所以決定寫個(gè)教程幫助大家)
有同志要問(wèn)了,米色老濕你的全屏代碼跟別人的全屏代碼哪里不一樣呢?
我們都知道淘寶和天貓店鋪版本是不一樣的,所以代碼有時(shí)候會(huì)不一樣,我的全屏代碼,是可以天貓和淘寶通用的。并且無(wú)論你內(nèi)容寬度是多少,都能完美的全屏居中顯示。而且使用起來(lái)也是很方便。廢話不多說(shuō) 進(jìn)入正題:
一:為什么店鋪里面不能全屏

看上圖代碼會(huì)發(fā)現(xiàn),自定義模塊框架內(nèi) 一個(gè)class名為 skin-box-bd 的哥們,帶有2個(gè)樣式 width:750px; overflow:hidden;
有同志要問(wèn)了,這有什么問(wèn)題。上面2個(gè)樣式意思是,寬度750px;溢出隱藏。顧名思義就是放在自定義模塊里面的內(nèi)容,如果寬度超過(guò)750,那么超過(guò)的部分就會(huì)隱藏,自然就不能全屏了、
二:解決思路
說(shuō)思路前,先說(shuō)下,要想全屏店鋪里面只能使用定位實(shí)現(xiàn)。然而淘寶不允許店鋪里面商家使用定位(相對(duì)定位除外)和外邊距負(fù)值。那就需要好好琢磨下如何實(shí)現(xiàn)了。這里我利用雙重定位,對(duì)需要全屏的內(nèi)容進(jìn)行兩次移動(dòng),從而達(dá)到全屏的效果
三:具體實(shí)現(xiàn)代碼
<div class="miseu" style="height: 【高度2】px;">
<div class="footer-more-trigger most-footer sn-simple-logo" style="position: absolute; left: 50%; top: auto; width: 0; height: inherit; border: 0; padding: 0; background: transparent;">
<div class="footer-more-trigger most-footer sn-simple-logo" style="position: absolute; left: -【店鋪類型】px; top: 【去下邊距】px; width: 1920px; height: 【高度】px; border: 0px; padding: 0px; background: transparent;">
<div class="clearfix J_TWidget" style="margin: 0 auto; width: 【寬度】px; height: 【高度】px;" data-source="米色官網(wǎng):www.mgsns.com">
【內(nèi)容】
</div>
</div>
</div>
</div>
參數(shù)剖析:
【高度2】:【高度】-【去下邊距】
【店鋪類型】:天貓店和淘寶專業(yè)版 這里修改成960
【去下邊距】:自定義模塊之間的距離,天貓和淘寶專業(yè)版 這里寫10 ,基礎(chǔ)版店鋪這里寫20.如果不需要去掉自定義模塊之間的距離,就寫 0
【高度】:需要全屏的內(nèi)容整體高度
【寬度】:需要全屏的內(nèi)容整體寬度
【內(nèi)容】:這里整個(gè)替換為你需要全屏的代碼
注意:替換的時(shí)候【】這個(gè)括號(hào)也一起替換了
四:拓展說(shuō)明
雖然寫的很清晰,可能會(huì)有一些同志 還是覺(jué)得很麻煩,所以我又專門,編寫了一個(gè)在線生成的工具,只需要按照說(shuō)明,添加內(nèi)容,點(diǎn)擊按鈕自動(dòng)生成需要的代碼。工具地址(復(fù)制地址在瀏覽器打開(kāi))
樂(lè)發(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)源: 淘寶基礎(chǔ)版全屏首頁(yè)代碼