淘宝装修：1920全屏海报（源代码免费下载）

php道勤 · 发表于 2014-10-17 09:43:37

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 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>

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！