内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
24 Jul.2014
先看案例:天猫店http://xxhshipin.tmall.com  淘宝店:http://666hsh.taobao.com
模块使用说明:
此模块只有短短不到十行代码,并且未调用任何Widget组件,纯CSS实现,大家可能会奇怪,为什么没有调用Widget组件,也可以实现全屏?哈哈,因为调用了模板class,大家看代码中的 class="footer-more-trigger",这个footer-more-trigger就是模板自带的class,那这个class包含哪些css呢?请看以下代码:

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

解释下其中的含义:
position:absolute,就是绝对定位,脱离文档流,说的通俗点,就是脱离淘宝的950界线,想要实现全屏,那我们就要用到这个属性。
padding,内边距,我们不需要,所以要把它去掉,设置padding:0即可;
width,宽度,这个我们也不需要,不用理它就可以,设置为width:0px也可以;
line-height,行高,全屏海报不需要这个,也不理它;
border,边框,这个必须设置为border:none,也就是把边框设为无,要不左右上下将会各占1个象素;
left,左偏移,模板设置的是 -12px,这个当然不是我们需要的数值;
top,上偏移,模板设置的是 -5px,注意,这里我们必须设置为 top:auto,也就是自动,千万不要设置为 top:0px,不相信?你可以试下.

事实上,我们只需要用到这个class里的position:absolute绝对定位属性,其它的是我们不需要的,可能会有朋友说了,那我们自己写一个绝对定位不就行了,干嘛非要调用这个class?呵呵,如果我们自定义能用这个属性,那我就不用搞的这么复杂了。

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

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>

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>



如果不会用的,请看以下视频演示:
分享到QQ空间
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情