淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3392|回复: 10
收起左侧

分享一个装修技巧,利用全屏代码实现2个模块叠加

[复制链接]
  • TA的每日心情
    不爽
    3 天前
  • 签到天数: 719 天

    连续签到: 2 天

    [LV.9]已臻大成

    32

    主题

    742

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    135228

    最佳新人热心会员

    QQ
    发表于 2016-1-6 11:06:58 | 显示全部楼层 |阅读模式
    本帖最后由 凌空孤云 于 2016-1-7 16:33 编辑

    分享一个装修技巧,利用全屏代码实现2个模块叠加。全屏代码如下:(论坛一大堆,这里方便新人下)

    1. <blockquote><div style="height:1173px;">
    复制代码
    年末各种活动,雪花代码之类FLASH代码用起来,感觉各种高大上。我现在就分享一个在你原来的海报上加雪花代码的小技巧,希望能帮到新人们(大神们肯定都会了)
    1.论坛搜索雪花代码之类的代码.找到一大堆。生效的就是这段代码:
    1. <embed allowscriptaccess="never" flashvars="scene=taobao_shop" width="100%" height="750" src="//vodcdn.alicdn.com/https/playercase0.0.1.swf?playerurl=http%3A%2F%2Fimg1.tbcdn.cn%2Ftfscom%2FT1lmk2Fk8bXXXtxVjX.swf" type="application/x-shockwave-flash" wmode="transparent"> </embed>
    复制代码
    2.根据需求,我们把这个单个的视频做成你需要的尺寸的模块。我就以全屏为例子,代码如下:
    1. <div class="piaohua" style="width:1920px;height:600px;padding:0px;border:0;<font color="#ff0000">z-index:99</font>;">

    2. <li class="zuohua" style="width:475px;height:600px;float:left; margin:0 0 0 0;">
    3.         <embed allowScriptAccess="never" flashvars="scene=taobao_shop" height="600" src="[flash]http://img2.tbcdn.cn/tfscom/T1R13qFcxcXXXtxVjX.swf[/flash]" type="application/x-shockwave-flash" width="475" wmode="transparent"></embed>
    4.       </li>

    5. <li class="youhua" style="width:450px;height:600px; float:right;">
    6.         <embed allowScriptAccess="never" flashvars="scene=taobao_shop" height="600" src="[flash]http://img2.tbcdn.cn/tfscom/T1R13qFcxcXXXtxVjX.swf[/flash]" type="application/x-shockwave-flash" width="475" wmode="transparent"></embed>
    7.       </li>
    8. </div>
    复制代码
    3.我们把这段代码变成全屏代码,并且把这个模块跟你原来的全屏海报重叠。

    1. <div style="height:-505px;">
    2.   <div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:600px;top:auto;padding:0;border:none;background:none;">
    3.     <div class="sn-simple-logo" style="left:-465px;top:-1105px;width:1920px;height:600px;border:none;padding:0;background:none;">

    4. <div class="piaohua" style="width:1920px;height:600px;padding:0px;border:0;z-index:99;">

    5. <li class="zuohua" style="width:475px;height:600px;float:left; margin:0 0 0 0;">
    6.         <embed allowScriptAccess="never" flashvars="scene=taobao_shop" height="600" src="[flash]http://img2.tbcdn.cn/tfscom/T1R13qFcxcXXXtxVjX.swf[/flash]" type="application/x-shockwave-flash" width="475" wmode="transparent"></embed>
    7.       </li>

    8. <li class="lianjie" style="width:888px; height:600px;float:left;"> <a  target="_blank"><img src="https://img.alicdn.com/imgextra/i1/2201403989/TB2lww1jXXXXXX_XXXXXXXXXXXX_!!2201403989.png" alt=" 1020.png" width="888" height="600"/></a>
    9. </li>
    10.       
    11. <li class="youhua" style="width:450px;height:600px; float:right;">
    12.         <embed allowScriptAccess="never" flashvars="scene=taobao_shop" height="600" src="[flash]http://img2.tbcdn.cn/tfscom/T1R13qFcxcXXXtxVjX.swf[/flash]" type="application/x-shockwave-flash" width="475" wmode="transparent"></embed>
    13.       </li>
    14. </div>



    15. </div>
    16. </div>
    17. </div>
    复制代码
    注:第一个<div style="height:-505px;">这里的高度就是你做的飘雪代码的高度减去你要重叠的模块的高度。具体可以看老大之前的帖子。http://www.taobaoux.com/thread-1053-1-1.html第二个红字标注的top:-1105px,这里就是你要往上移的高度。就是你要重叠的模块高度里面的代码请自动手动去掉[flash]跟[/flash]"


    这个技巧的方便之处就是可以不动你原来的全屏海报,可以随意的换飘雪飘什么之类的效果。也可以灵活运用哦(希望对不知道的人有些帮助)
    预览店铺地址:https://qinouhhdj.tmall.com  (我来这公司晚,网店我只负责首焦跟详情页的模板。海报的素材都是千图上的哈哈)




    评分

    参与人数 1美工币 +8 收起 理由
    wuhalang0302 + 8

    查看全部评分

    http://eyunsj.taobao.com/个人接单淘宝主页
  • TA的每日心情
    抱抱
    2016-7-25 07:05
  • 签到天数: 950 天

    连续签到: 3 天

    [LV.10]功行圆满

    0

    主题

    466

    帖子

    15万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    156301

    发表于 2016-1-6 11:17:10 | 显示全部楼层
    学习了,谢谢!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    吐舌头
    2016-11-10 13:55
  • 签到天数: 251 天

    连续签到: 1 天

    [LV.8]自成一派

    3

    主题

    346

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53969

    最佳新人热心会员宣传达人

    发表于 2016-1-6 11:27:50 | 显示全部楼层
    学习了。赞一个
    PS美工交流群  283995557
  • TA的每日心情
    加油
    2016-11-4 21:06
  • 签到天数: 136 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    649

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23710

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2016-1-6 11:28:03 | 显示全部楼层
    虽然我不懂 但还是谢谢大神分享

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    无奈
    2016-1-27 13:48
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    31

    主题

    599

    帖子

    6749

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6749

    天猫美工最佳新人热心会员

    发表于 2016-1-6 11:41:45 | 显示全部楼层
    感谢分享 但是是否需要在最上面加上整个区域的链接
    这样雪花的地方会挡住链接的把

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2016-10-17 16:29
  • 签到天数: 327 天

    连续签到: 1 天

    [LV.8]自成一派

    6

    主题

    370

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63610

    最佳新人热心会员

    发表于 2016-1-6 11:53:26 | 显示全部楼层
    感谢大神分享

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    3 天前
  • 签到天数: 719 天

    连续签到: 2 天

    [LV.9]已臻大成

    32

    主题

    742

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    135228

    最佳新人热心会员

    QQ
     楼主| 发表于 2016-1-6 11:57:34 | 显示全部楼层
    蓝大蓝 发表于 2016-1-6 11:41
    感谢分享 但是是否需要在最上面加上整个区域的链接
    这样雪花的地方会挡住链接的把
    ...

    雪花的链接部分,我选择了比较偷巧的方法,就是在中间插入了一张PNG透明图片加的链接。因为这个我只需要旁边2侧的飘花。有时候我也会用弹出层写1个全屏的PNG弹出加代码。

    http://eyunsj.taobao.com/个人接单淘宝主页
  • TA的每日心情
    加油
    2016-3-30 16:56
  • 签到天数: 39 天

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    46

    帖子

    4655

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4655

    最佳新人

    发表于 2016-1-6 11:59:01 | 显示全部楼层
    好棒,已收藏,赞一下

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    昨天 21:56
  • 签到天数: 323 天

    连续签到: 6 天

    [LV.8]自成一派

    11

    主题

    172

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43571

    发表于 2016-1-6 22:21:11 | 显示全部楼层
    全屏海报放在雪花代码的前面吗?-505不是很明白

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-10-29 09:08
  • 签到天数: 614 天

    连续签到: 1 天

    [LV.9]已臻大成

    28

    主题

    624

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    149236

    最佳新人热心会员宣传达人

    发表于 2016-1-6 23:19:43 | 显示全部楼层
    直接top上移,设置z-index就可以了,看着你的全屏特别变扭,有很多冗余代码

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

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

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-7 02:05 , Processed in 0.142680 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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