艺灵设计

全部文章
×

淘宝c店全屏模板框架

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-11-07 10:46:22 - 阅: - 评:0 - 积分:0

适用范围:已开通/未开通旺铺CSS的C店均可!

前面分享了天猫店铺未付费卖家实现店铺全屏的代码,不明真相的亲猛戳《纯css实现超宽图片全屏居中(兼容淘宝店铺)》,由于淘宝中还有一部分是c店的,那么c店的全屏要怎么弄呢?还是原来的“sn-simple-logo?”NO!绝对不是,那个在c店里面已经不复存在了。昨天下午洒家研究了下c店的源码,在失败n次后终于发现了一个可以全屏的了,好激动。好了,废话不多说,上源码:

 

  1. <div style="height:500px">
  2.  <div class="site-nav-bd">
  3.   <div class="menu">
  4.    <div class="menu-bd" style="display:block;position:inherit;">
  5.    <div class="menu-bd-panel" style="background-color:transparent;padding:0;border:0;left:50%;">
  6.    <div class="menu-bd-panel" style="background-color:transparent;padding:0;border:0;left:-960px;">
  7.    <div style="width:1920px;height:400px;background:#f00">这个里面放内容</div>
  8.     </div>
  9.    </div>
  10.    </div>
  11.   </div>
  12.  </div>
  13. </div>

经测试这个全屏框架是可行的,需要的亲直接拷贝走,在后台中新建一模块,放进去,然后再放入自己的内容即可,附分析图一张:
淘宝c店全屏模板框架

2013.11.19 更新   

最近又看到一个c店的全屏框架,对比下自己前面那个,这个要比洒家发现的那个更简单。淘宝真是牛人无处不在啊!特别是找源码的这些人,当初得翻多少次啊,找到一堆能用的后再进行测试筛选最简洁且系统不屏蔽的代码。

 

  1. <div style="height:500px;">
  2.  <div class="footer-more-trigger" style="left:50%;border:0;padding:0;">
  3.   <div class="footer-more-trigger" style="left:-960px;border:0;padding:0;">
  4.    <div style="width:1920px;height:600px;background:#f00">
  5.    轮播,图片,内容什么的全放这里,但二级(自定义)页面失效
  6.    </div>
  7.   </div>
  8.  </div>
  9. </div>

效果图:

需要注意的是:上面两款代码框架虽然都能实现首页的全屏,但子页面也就是自定义页面是不行的。很奇怪的是,洒家在审查状态下测试也不行,不明觉厉!

2015.03.26 更新   

补充一点,上面说的子页面不行是因为系统样式限制原因。系统样式:#bd{position:relative;overflow:hidden;},系统的层级目录是这样的:#page>#content>#bd,由于未开通旺铺CSS的店铺是无法修改系统样式的,所以就没办法解决了。不过呢,会破解技术也是可以破解的哈,这个就不多说了,在导航上面的“在线生成”中的某款软件里面已经提供了此功能,粘贴代码即可。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2013-11-07/110.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 全屏页面 淘宝店铺装修 c店装修 全屏模板框架 footer-more-trigger

上一篇: 马尔杜克家双11最新特效   下一篇: 卡迪森灯饰双11首页抛光效果

评论区