这里可以设置广告或签名，请到【首页】用户名旁边-【设置】-【个人资料】-【个人信息】-【个人签名】设置
|
今天就来介绍下详情页中如何固定背景且是全屏的。虽然有部分亲在之前就已经会了，但鄙人喜欢分享。所谓：独乐乐不如众乐乐。附效果图一张：/ I) d6 N2 }; i' _$ G
![]()
) E' ^9 V9 u# H1 V" D下面附源码html模块内容：: d( w( k* O2 q; C1 R
<div class="hidden" style="display:none;">--C店详情页百变全屏背景固定 2014/05/29 小杜--</div>3 K9 \( h; y! ^: _' F
<div class="footer-more-trigger" style="left:0;width:190px;top:-800px;padding:0;border:0;">1 b: k& F+ U* Y+ J
<div class="footer-more-trigger" style="left:-390px;width:1920px;height:10000px;padding:0;border:0;top:0;">
2 V+ G3 j8 q3 b2 I3 B& Z* F <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>
5 k4 h1 O' M' A/ l </div>
1 n8 b+ K2 B# Q7 l* U* {</div>. V$ b3 P$ u% r; v2 v, y
复制以上模块内容后到自己店铺后台按照以下顺序操作。店铺装修→→默认宝贝详情页→→左侧新建一自定义内容模块→→点击源码后将复制的代码放进去→→保存--发布即可。此时大功告成，返回产品页面即可看到效果。至于如何达到“百变”的效果呢？按照以上步骤，新建多个详情页，按照不同的产品选择对应的详情即可。$ x) A/ J1 E& c% J3 Z" F
下面说一些题外话，鄙站中也发表了一小部分关于淘宝店铺装修方面的内容，但时常在群里看到有些亲还是在提问一些有案例的问题，每当看到此时，鄙人的心都凉了。鄙人并没有歧视新人的意思，只是自己不加以思考的话，习惯了衣来伸手饭来张口后只会害了自己！下面仅以此文为例，用问答的形式来详细的进行剖析。
' M$ ]3 [& O/ O- }+ F问题一：如何实现全屏？5 l, `( W) H% @9 M6 \5 m
答：无论是付费店铺还是未付费店铺均可使用官方的“footer-more-trigger”属性，此属性有什么作用鄙人就不废话了，装修过淘宝店铺的亲都懂得，无非是定位的作用而已！
, Q* A6 {( Y; S+ }问题二：为什么全屏后在不同显示屏下会偏呢？( C& v6 [, s4 _ ?- ?
答：全屏是全屏了，但并没有做到居中！不同情况下居中的方式不同，有时需要变通。例如此文章的居中就是不走寻常路的做法，有兴趣的亲可以按照自己的常规思路来实现看看。
& |& N, d% e( F) I问量三：这里的“left”的值为什么是“-390”呢？. J9 E' f4 A6 D
答：回归第二问的结果。c店详情页主体部位是1140px；通常设置全屏时的宽度是1920px；那么旁白还剩下780px；旁白会分左右两边，对半分后便是390了。如果计算不出来的话，我只能哭着对亲说：“亲，你的数学老师一定中体育老师教的”5 B m2 z% C( P# E, q! |
代码.txt
(577 Bytes, 下载次数: 1054)
+ }: R/ q* o; q5 n4 ]+ n5 l
, ~+ Q: o; g8 n: |0 @6 `; ~ |
评分
-
查看全部评分
|
[复制链接]
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
