做過淘寶或者天貓店鋪裝修的同志,肯定會經常遇到一個很尷尬的問題,就是為啥本地寫好的代碼,放店鋪里面就是不能全屏顯示呢,只能顯示950或者990像素寬度。(可能這個問題很多人知道,不過考慮到很多人也許不知道所以決定寫個教程幫助大家)
有同志要問了,米色老濕你的全屏代碼跟別人的全屏代碼哪里不一樣呢?
我們都知道淘寶和天貓店鋪版本是不一樣的,所以代碼有時候會不一樣,我的全屏代碼,是可以天貓和淘寶通用的。并且無論你內容寬度是多少,都能完美的全屏居中顯示。而且使用起來也是很方便。廢話不多說 進入正題:
一:為什么店鋪里面不能全屏
看上圖代碼會發現,自定義模塊框架內 一個class名為 skin-box-bd 的哥們,帶有2個樣式 width:750px; overflow:hidden;
有同志要問了,這有什么問題。上面2個樣式意思是,寬度750px;溢出隱藏。顧名思義就是放在自定義模塊里面的內容,如果寬度超過750.那么超過的部分就會隱藏,自然就不能全屏了、
二:解決思路
說思路前,先說下,要想全屏店鋪里面只能使用定位實現。然而淘寶不允許店鋪里面商家使用定位(相對定位除外)和外邊距負值。那就需要好好琢磨下如何實現了。這里我利用雙重定位,對需要全屏的內容進行兩次移動,從而達到全屏的效果
三:具體實現代碼
<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="米色官網:www.mgsns.com">
【內容】
</div>
</div>
</div>
</div>
參數剖析:
【高度2】:【高度】-【去下邊距】
【店鋪類型】:天貓店和淘寶專業版 這里修改成960
【去下邊距】:自定義模塊之間的距離,天貓和淘寶專業版 這里寫10 ,基礎版店鋪這里寫20.如果不需要去掉自定義模塊之間的距離,就寫 0
【高度】:需要全屏的內容整體高度
【寬度】:需要全屏的內容整體寬度
【內容】:這里整個替換為你需要全屏的代碼
注意:替換的時候【】這個括號也一起替換了
四:拓展說明
雖然寫的很清晰,可能會有一些同志 還是覺得很麻煩,所以我又專門,編寫了一個在線生成的工具,只需要按照說明,添加內容,點擊按鈕自動生成需要的代碼。工具地址(復制地址在瀏覽器打開)
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 店鋪全屏代碼 淘寶自定義全屏代碼