天猫首页全屏代码(天猫淘宝全屏代码的使用方法)
做过淘宝或者天猫店铺装修的同志,肯定会经常遇到一个很尴尬的问题,就是为啥本地写好的代码,放店铺里面就是不能全屏显示呢,只能显示950或者990像素宽度。(可能这个问题很多人知道,不过考虑到很多人也许不知道所以决定写个教程帮助大家)
有同志要问了,米色老湿你的全屏代码跟别人的全屏代码哪里不一样呢?
我们都知道淘宝和天猫店铺版本是不一样的,所以代码有时候会不一样,我的全屏代码,是可以天猫和淘宝通用的。并且无论你内容宽度是多少,都能完美的全屏居中显示。而且使用起来也是很方便。废话不多说 进入正题:
一:为什么店铺里面不能全屏
看上图代码会发现,自定义模块框架内 一个class名为 skin-box-bd 的哥们,带有2个样式 width:750px; overflow:hidden;
有同志要问了,这有什么问题。上面2个样式意思是,宽度750px;溢出隐藏。顾名思义就是放在自定义模块里面的内容,如果宽度超过750,那么超过的部分就会隐藏,自然就不能全屏了、
二:解决思路
说思路前,先说下,要想全屏店铺里面只能使用定位实现。然而淘宝不允许店铺里面商家使用定位(相对定位除外)和外边距负值。那就需要好好琢磨下如何实现了。这里我利用双重定位,对需要全屏的内容进行两次移动,从而达到全屏的效果
三:具体实现代码
<p style="height: 【高度2】px;">
<p style="position: absolute; left: 50%; top: auto; width: 0; height: inherit; border: 0; padding: 0; background: transparent;">
<p style="position: absolute; left: -【店铺类型】px; top: 【去下边距】px; width: 1920px; height: 【高度】px; border: 0px; padding: 0px; background: transparent;">
<p style="margin: 0 auto; width: 【宽度】px; height: 【高度】px;" data-source="米色官网:www.mgsns.com">
【内容】
</p>
</p>
</p>
</p>
参数剖析:
【高度2】:【高度】-【去下边距】
【店铺类型】:天猫店和淘宝专业版 这里修改成960
【去下边距】:自定义模块之间的距离,天猫和淘宝专业版 这里写10 ,基础版店铺这里写20.如果不需要去掉自定义模块之间的距离,就写 0
【高度】:需要全屏的内容整体高度
【宽度】:需要全屏的内容整体宽度
【内容】:这里整个替换为你需要全屏的代码
注意:替换的时候【】这个括号也一起替换了
四:拓展说明
虽然写的很清晰,可能会有一些同志 还是觉得很麻烦,所以我又专门,编写了一个在线生成的工具,只需要按照说明,添加内容,点击按钮自动生成需要的代码。