淘宝装修：1920全屏海报（源代码免费下载）
本帖最后由 php道勤 于 2015-1-11 18:27 编辑淘宝装修：1920全屏海报（源代码免费下载）
模块使用说明：
此模块只有短短不到十行代码，并且未调用任何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>http://www.56.com/u13/v_MTI3NTcxODQy.html
页:
[1]