设计主页 > 网站制作 > 建站经验 >

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

uedsc / 佚名 时间:2015-04-16 09:00

以前给大家分享过一个淘宝店铺装修1920px通栏代码,主要是调用了淘宝的JS Widget组件,而且是幻灯片的效果,但是如果我们只是单纯的想实现宽屏通栏的效果,而代码量又不需要太多,我们可是使用淘宝已经定义的CSS类来解决,此模块只有短短不到十行代码,并且未调用任何JS Widget组件,完全纯CSS实现。

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

对于宽屏的代码定位问题,首先我们要脱离文档流的束缚,最主要的就是Position属性,懂一点网页技术的人都知道这是设置元素定位的,对于这个属性详细的介绍,您可以看看我的另一篇文章:CSS中HTML元素定位Position参数可选值详解,其次利用负边距来移动元素的相对父级元素的位置,对于这段话你可能不太理解,没关系你可以看看这篇文档:使用CSS处理网页布局居中问题。

footer-more-trigger

淘宝里面有一个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;
}

解释其中含义

事实上,我们只需要用到这个class里的position:absolute绝对定位属性,其它的是我们不需要的,可能会有朋友说了,那我们自己写一个绝对定位不就行了,干嘛非要调用这个class?如果我们自定义能用这个属性,那我就不用搞的这么复杂了,淘宝在保存代码的时候,会自动过滤掉关于定位的代码。

学过HTML、XHTML的,应该都知道CSS的加载顺序为:行内样式-内部样式-外部样式,其中行内样式优先级最高,所以我们在代码中加入 style=”top:auto;border:none;padding:0;” 将会被加载,而不会再去加载模板自带的CSS样式。

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

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标签父元素的左侧负距离,这个值刚好的两倍的关系,根据上面的代码,我们也能得出下面的代码。

1680px全屏海报代码

宽度1680px,高度随便自己调,同时修改两处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:-840px;top:auto;border:none;padding:0;">
      <a href="#" target="_blank" style="width:1680px;height:500px;display:block;">
              <img src="#" border="0" alt="全屏海报" /></a>
        </div>
    </div>
</div>

1440px全屏海报代码

宽度1440px,高度随便自己调,同时修改两处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:-720px;top:auto;border:none;padding:0;">
      <a href="#" target="_blank" style="width:1440px;height:500px;display:block;">
              <img src="#" border="0" alt="全屏海报" /></a>
        </div>
    </div>
</div>

注意:以上代码仅适用于淘宝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属性,我们就可以使用这个类给我们添加全屏的效果。