荷塘月色_淘宝抖音跨境电商卖家论坛社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问移动社区

查看: 40097|回复: 102
打印 上一主题 下一主题

[其他] C店详情页百变全屏背景固定

  [复制链接]
这里可以设置广告或签名,请到【首页】用户名旁边-【设置】-【个人资料】-【个人信息】-【个人签名】设置
跳转到指定楼层
#
黑骑士 发表于 2014-7-2 12:29:14 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
今天就来介绍下详情页中如何固定背景且是全屏的。虽然有部分亲在之前就已经会了,但鄙人喜欢分享。所谓:独乐乐不如众乐乐。附效果图一张:

下面附源码html模块内容:
<div class="hidden" style="display:none;">--C店详情页百变全屏背景固定  2014/05/29 小杜--</div>
<div class="footer-more-trigger" style="left:0;width:190px;top:-800px;padding:0;border:0;">
 <div class="footer-more-trigger" style="left:-390px;width:1920px;height:10000px;padding:0;border:0;top:0;">
  <div style="width:1920px;background:url(http://img03.taobaocdn.com/imgex ... XX_!!1758846006.jpg) no-repeat fixed center top;height:100%;text-align:center;background-color:#f00;">请替换适合自己店铺的背景,背景色可以更换也可去掉,此处起便于观察作用!</div>
 </div>
</div>
复制以上模块内容后到自己店铺后台按照以下顺序操作。店铺装修→→默认宝贝详情页→→左侧新建一自定义内容模块→→点击源码后将复制的代码放进去→→保存--发布即可。此时大功告成,返回产品页面即可看到效果。至于如何达到“百变”的效果呢?按照以上步骤,新建多个详情页,按照不同的产品选择对应的详情即可。
下面说一些题外话,鄙站中也发表了一小部分关于淘宝店铺装修方面的内容,但时常在群里看到有些亲还是在提问一些有案例的问题,每当看到此时,鄙人的心都凉了。鄙人并没有歧视新人的意思,只是自己不加以思考的话,习惯了衣来伸手饭来张口后只会害了自己!下面仅以此文为例,用问答的形式来详细的进行剖析。
问题一:如何实现全屏?
答:无论是付费店铺还是未付费店铺均可使用官方的“footer-more-trigger”属性,此属性有什么作用鄙人就不废话了,装修过淘宝店铺的亲都懂得,无非是定位的作用而已!
问题二:为什么全屏后在不同显示屏下会偏呢?
答:全屏是全屏了,但并没有做到居中!不同情况下居中的方式不同,有时需要变通。例如此文章的居中就是不走寻常路的做法,有兴趣的亲可以按照自己的常规思路来实现看看。
问量三:这里的“left”的值为什么是“-390”呢?
答:回归第二问的结果。c店详情页主体部位是1140px;通常设置全屏时的宽度是1920px;那么旁白还剩下780px;旁白会分左右两边,对半分后便是390了。如果计算不出来的话,我只能哭着对亲说:“亲,你的数学老师一定中体育老师教的”
代码.txt (577 Bytes, 下载次数: 1060)

评分

参与人数 1荷币 0 收起 理由
admin 0 纯转载,再接再厉

查看全部评分

微信扫以上二维码分享朋友圈;或手机浏览器分享微信朋友圈;马上获得荷币奖励 奖励规则

(声明:本文由网友发布,不代表本站观点或立场,如有侵权请联系QQ:2377240266处理)

 

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

102#
遇见~ 发表于 2015-8-31 04:24:30 | 只看该作者
......................
回复 支持 反对

使用道具 举报

101#
小东1988 发表于 2015-4-3 15:18:51 | 只看该作者
11111111111111111111
回复 支持 反对

使用道具 举报

100#
httg1986 发表于 2015-4-3 15:12:21 | 只看该作者
不错不错不错不错不错
回复 支持 反对

使用道具 举报

99#
zeblee 发表于 2014-11-19 11:10:46 | 只看该作者
我擦擦,干货啊这是~~~
回复 支持 反对

使用道具 举报

98#
靜思 发表于 2014-10-5 13:04:28 | 只看该作者
这个好啊。我要了
回复 支持 反对

使用道具 举报

97#
seed555 发表于 2014-9-30 23:01:03 | 只看该作者
这个要学习
回复 支持 反对

使用道具 举报

96#
aijixian 发表于 2014-9-7 17:25:28 | 只看该作者
看下了  代码没法复制的说
回复 支持 反对

使用道具 举报

95#
荷塘月色amdin 发表于 2014-9-6 06:11:36 | 只看该作者
bucuo
我喜欢
回复 支持 反对

使用道具 举报

94#
阿汤哥 发表于 2014-8-21 02:48:55 | 只看该作者
看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

93#
apple 发表于 2014-8-14 12:17:59 | 只看该作者
21111111111111
回复 支持 反对

使用道具 举报

92#
lv007lv 发表于 2014-7-26 15:03:19 | 只看该作者
这个可以有的
回复 支持 反对

使用道具 举报

91#
べ_宠_u⒈生。 发表于 2014-7-19 20:43:37 | 只看该作者

来荷塘月色论坛,学到了很多!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线客服中心
关闭

微信客服 QQ客服 点击这里给我发送消息

加大群免费领取干货

 
在线客服中心

手机版|荷塘月色_淘宝拼多多抖音小红书论坛_跨境电商商家最喜欢的开店运营经验学习交流社区论坛  
【免责声明:本站内容均来自网友发布,不代表本站观点或立场,如有侵权请联系我们处理】

GMT+8, 2024-12-1 18:00 , Processed in 0.272643 second(s), 60 queries , Gzip On.

快速回复 返回顶部 返回列表