【罗涛教育】淘宝豪华装修关键一步之自定义区域无缝隙制作方法与代码

很多淘宝店家在装修店铺的时候会遇见一个比较头疼的问题，就是自定义区域中间有一个空隙，本来做好的大图被切割之后上传到自定义中无法很好的衔接在一起，中间会有个个空隙，把店铺的美感给打破了，有些豪华一些的装修会经常遇见自定义区域的空隙问题。今天我们就来解决这个问题。（下图就是自定义之间的空隙）

淘宝自定义间隙一般是10px~20px，只需要一段代码就可以解决这个问题。目前消除模块间隙只能限于两个自定义的模块，如果是官方的图片轮播、宝贝推荐等模块就无法消除10PX间隙。

下图就是通过代码可以去除自定义区域的空隙效果（全屏海报和950px自定义区域）

百度上有非常多的去除空隙代码，但有些是错误或者被删减了很多关键部分，有些讲解的不够详细——所以经过我一遍遍测试与修改最终形成了这两段代码，以方便广大淘宝店家或者是美工设计师制作自己想要的店铺效果。

1920px全屏海报代码

<div style="height:430px;width:1920px;">
<div class="footer-more- trigger" style="width:1920px;height:450px;left:auto;top:auto;margin:0;padding:0;border:0;">
<div class="footer-more-trigger" style="left:-485px;top:-20px;margin:0;padding:0;border:0;">
<a href="产品链接"><img src="图片链接" /></a></div>
</div>
</div>

解释：这个是1920全屏海报代码，其中制作图片的尺寸高度是450px；宽度是1920px。

第一个div尺寸是430px这个很关键，因为它是在450px照片尺寸的基础上减掉了20px，也是top：-20上移了20像素。

假如我们制作的图片是600px，那么第一个div height：580px 第三行代码中的height：600px

950px自定义区域无缝链接代码

<div style="height:430px;width:1920px;">
<div class="footer-more- trigger" style="width:1920px;height:450px;left:auto;top:auto;margin:0;padding:0;border:0;">
<div class="footer-more-trigger" style="left:-485px;top:-20px;margin:0;padding:0;border:0;">
<a href="产品链接" target="_blank">

<img src="图片链接" /></a></div>
</div>
</div>

解释：这个是我特意为950px自定义区域设定的一段代码。

本段代码的图片大小是450px；第一个div设置大小是减掉20px的430px

假如我们制作的图片是600px，那么第一个div height：580px 第三行代码中的height：600px