淘宝店铺装修1920PX全屏海报代码

Question

经常看到淘宝上面的全屏海报，特别羡慕这种效果，查看了他们的图片也基本都是1920PX的尺寸，可能就基本能满足21寸显示器的分辨率，在淘宝论坛里面找到了相关的解决方法，在此分享给大家。

虽然现在的淘宝出了个旺铺智能版，有一个全屏海报的模块，但是那个模块是限定最大高度的，而我们的图片一般都比较大，并不适合我们而且价格还比较贵，不建议大家升级到旺铺智能版。

对于宽屏的代码定位问题，首先我们要脱离文档流的束缚，最主要的就是Position属性，懂一点网页技术的人都知道这是设置元素定位的，结合我们上一篇文章中的居中对齐，就能实现突破淘宝网960PX的限制，实现网页全屏海报展示。

Position定位

淘宝网是不允许我们使用Position属性的，即使你写了在提交的时候也会被自动删除，不过细心的网页发现可以添加Class属性，而不会被淘宝屏蔽，那么我们可以在淘宝的Css文件里面早一个有定位的Class类，然后应用到我们元素中，而且淘宝网对Style属性也没有屏蔽。

淘宝里面有一个footer-more-trigger的类，这个类设置的相对定位的属性，我们可以使用这个类达到我们想要的效果，不过有些属性我们需要重置一些，比如边框内填充等。

.footer-more-trigger {
    position: absolute;
    padding: 6px 11px 4px 14px;
    width: 37px;
    line-height: 1.3;
    border: 1px solid #fff;
    left: -12px;
    top: -5px;
}

1920px全屏海报代码

宽度1920px，高度随便自己调，同时修改两处500px即可。

<div style="height:500px;">
    <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
        <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
            <a href="#" target="_blank" style="width:1920px;height:500px;display:block;">
                <img src="#" border="0" alt="全屏海报" />
            </a>
        </div>
    </div>
</div>

根据上面的代码，可能你也看出来了，A标签定义了一个1920px的宽度和A标签父元素的左侧负距离，这个值刚好的两倍的关系，根据上面的代码，我们也能得出下面的代码。

PS：其实不必非得要用footer-more-trigger这个类，任何拥有Position定位的且不会被淘宝自动过滤掉的类，我们都可以利用。

如果你的海报不是1920PX的宽度，那么修改第三个DIV的Left值为你海报的宽度的一般，修改A标签的宽度等于你海报的宽度即可。

注意：以上代码仅适用于淘宝C店，天猫商城请用以下代码。

天猫店1920px全屏海报

宽度1920px，高度随便自己调，同时修改两处500px即可。

<div style="height:500px;">
  <div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">
    <div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;">
      <a href="#" style="width:1920px;height:500px;display:block;" target="_blank">
        <img alt="全屏海报" border="0" src="#" />
      </a>
    </div>
  </div>
</div>

通过查看天猫的CSS文件，我们可以搜索到一下代码：

.sn-simple-logo{
    _width:auto!important
}
#content .sn-simple-logo{
    position:absolute
}

同样有一个position:absolute属性，我们就可以使用这个类给我们添加全屏的效果。