这里可以设置广告或签名,请到【首页】用户名旁边-【设置】-【个人资料】-【个人信息】-【个人签名】设置
|
今天就来介绍下详情页中如何固定背景且是全屏的。虽然有部分亲在之前就已经会了,但鄙人喜欢分享。所谓:独乐乐不如众乐乐。附效果图一张:
, c& [# j6 A3 G) @6 e; ~
+ A* h' S2 u N1 F; d下面附源码html模块内容:
6 U- _1 [: E$ I* ?! e# ?4 n3 \<div class="hidden" style="display:none;">--C店详情页百变全屏背景固定 2014/05/29 小杜--</div>
7 B6 p: [. t Q0 w6 h7 O& K2 \$ u# A<div class="footer-more-trigger" style="left:0;width:190px;top:-800px;padding:0;border:0;">/ { w; {2 K# _ N" [% t, v9 t3 i
<div class="footer-more-trigger" style="left:-390px;width:1920px;height:10000px;padding:0;border:0;top:0;">/ b0 S" r1 y4 ^/ H+ d" q0 g
<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>
$ b: f$ o% o% {8 Y$ y# v" v </div>
- C- z. h( Z& u4 P T- E</div>; j" H$ p. M6 h; D5 p/ S w* k
复制以上模块内容后到自己店铺后台按照以下顺序操作。店铺装修→→默认宝贝详情页→→左侧新建一自定义内容模块→→点击源码后将复制的代码放进去→→保存--发布即可。此时大功告成,返回产品页面即可看到效果。至于如何达到“百变”的效果呢?按照以上步骤,新建多个详情页,按照不同的产品选择对应的详情即可。
$ t3 u5 b, {8 }. s" F+ x0 H下面说一些题外话,鄙站中也发表了一小部分关于淘宝店铺装修方面的内容,但时常在群里看到有些亲还是在提问一些有案例的问题,每当看到此时,鄙人的心都凉了。鄙人并没有歧视新人的意思,只是自己不加以思考的话,习惯了衣来伸手饭来张口后只会害了自己!下面仅以此文为例,用问答的形式来详细的进行剖析。
1 a7 ~0 I j+ [# F5 G问题一:如何实现全屏?' z- _+ w. l; [& E
答:无论是付费店铺还是未付费店铺均可使用官方的“footer-more-trigger”属性,此属性有什么作用鄙人就不废话了,装修过淘宝店铺的亲都懂得,无非是定位的作用而已!
# E( n: n& s- ]. A7 w问题二:为什么全屏后在不同显示屏下会偏呢?) T. A8 ~+ Z8 c* l% [
答:全屏是全屏了,但并没有做到居中!不同情况下居中的方式不同,有时需要变通。例如此文章的居中就是不走寻常路的做法,有兴趣的亲可以按照自己的常规思路来实现看看。
) A# t6 G1 a3 ^- Z& M* N) T9 S问量三:这里的“left”的值为什么是“-390”呢?" b4 C1 g- L0 c
答:回归第二问的结果。c店详情页主体部位是1140px;通常设置全屏时的宽度是1920px;那么旁白还剩下780px;旁白会分左右两边,对半分后便是390了。如果计算不出来的话,我只能哭着对亲说:“亲,你的数学老师一定中体育老师教的”" r7 W3 g9 p$ q. `- S$ O5 V& `/ ]; ]
代码.txt
(577 Bytes, 下载次数: 1055)
9 ~% ^6 {% L, s+ }6 e1 b; j( K# n
4 }6 u% L( u0 R A$ [+ o1 H" A |
评分
-
查看全部评分
|