淘宝装修:1920全屏海报(源代码免费下载)

模块使用说明:
此模块只有短短不到十行代码,并且未调用任何Widget组件,纯CSS实现,大家可能会奇怪,为什么没有调用Widget组件,也可以实现全屏?哈哈,因为调用了模板class,大家看代码中的 class="footer-more-trigger",这个footer-more-trigger就是模板自带的class,那这个class包含哪些css呢?请看以下代码:
  1. .footer-more-trigger {
  2. position: absolute;
  3. padding: 6px 11px 4px 14px;
  4. width: 37px;
  5. line-height: 1.3;
  6. border: 1px solid #fff;
  7. left: -12px;
  8. top: -5px;
  9. }
解释下其中的含义:
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即可)
  1. <div style="height:500px;">
  2.     <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
  3.         <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
  4.       <a href="#" target="_blank" style="width:1920px;height:500px;display:block;">
  5.               <img src="#" border="0" alt="全屏海报" /></a>
  6.         </div>
  7.     </div>
  8. </div>
1680px 全屏海报: (宽度1680px,高度随便自己调,同时修改两处500px即可)
  1. <div style="height:500px;">
  2.     <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
  3.         <div class="footer-more-trigger" style="left:-840px;top:auto;border:none;padding:0;">
  4.       <a href="#" target="_blank" style="width:1680px;height:500px;display:block;">
  5.               <img src="#" border="0" alt="全屏海报" /></a>
  6.         </div>
  7.     </div>
  8. </div>
1440px 全屏海报: (宽度1440px,高度随便自己调,同时修改两处500px即可)
  1. <div style="height:500px;">
  2.     <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
  3.         <div class="footer-more-trigger" style="left:-720px;top:auto;border:none;padding:0;">
  4.       <a href="#" target="_blank" style="width:1440px;height:500px;display:block;">
  5.               <img src="#" border="0" alt="全屏海报" /></a>
  6.         </div>
  7.     </div>
  8. </div>
注意:以上代码仅适用于淘宝C店,天猫商城请用以下代码:

1920px全屏海报: (宽度1920px,高度随便自己调,同时修改两处500px即可)
  1. <div style="height:500px;">
  2.   <div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">
  3.     <div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;">
  4.       <a href="#" style="width:1920px;height:500px;display:block;" target="_blank"> 
  5. <img alt="全屏海报" border="0" src="#" /></a>
  6. </div>
  7.   </div>
  8. </div>

如果不会用的,请看以下视频演示:

http://www.taobaoux.com/thread-122-1-1.html

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值