全屏、模块间隔无缝对接、在图片上添加视频等代码

进阶篇【全屏、模块间隔无缝对接、在图片上添加视频等代码】

如何实现全屏代码？

1. <div style="height:450px;">                                                               
   
2. <!-- 这里的height:450px;意思是说你所设计的整张图的高度 -->
   
3.   <div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">                     
   
4.   <!--这里的left:50%意思是说向左、向右50%的意思 -->
   
5.     <div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;">               
   
6.     <!--这里的-960px是指你所设计的页面的一半 -->
   
7. 这里放代码            <!--  <-----此处是你在PS中切片后所导出的HTM代码 -->
   
8.     </div>
   
9.   </div>                  
   
10. </div>

复制代码

模块与模块之间无缝

1. <font size="1" color="#696969"><font color="Black"><div style="height:450px;">               
   
2. <!-- 此处的意思是说，你整张图的高度，那么假如说我整张图高度现在为450像素高，第二段代码所说要向上移动10像素，
   
3. 那么此处就必须减掉你所移的值10像素，如移动了20像素就要减掉20像素，公式450-10=440那么你就需要将此处设为height:440px; -->
   
4.                                              
   
5.   <div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">                     
   
6. <!--此段代码中的top:auto,那么毋庸置疑top的意思就是顶部；
   
7. 上面的意思，那么auto值的意思是自动的意思（那么如我们要向上一个模块移动中间的间隔10个像素那么此处就应该改为top:-10px，向上移动10个像素的意思） -->
   
8. 
   
9.     <div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;">               
   
10.     <!--这里的-960px是指你所设计的页面的一半，如：1920/2=960；990/2=495（此为常用天猫页面大小） -->
    
11. 这里放代码            <!--  <-----此处是你在PS中切片后所导出的HTM代码 -->
    
12. </tr>                     
    
13.         </tbody>
    
14.       </table>
    
15.     </div>
    
16.   </div>
    
17. </div>
    
18. <!-- 此后三排均为DIV后缀，必须有，否则你的全屏代码就不能实现了--></font></font>

复制代码

天猫-图片上添加视频代码

1. <font size="1" color="#000000"><table border="0" cellpadding="0" cellspacing="0" class="" height="395" width="990">
   
2. <!-- height="图片高度"；width="图片宽度" -->
   
3. 
   
4. <td background="http://img03.taobaocdn.com/imgextra/i3/665298756/T2qAtIXuBaXXXXXXXX-665298756.jpg" colspan="2">
   
5. <!-- .jpg为背景图片 -->
   
6. 
   
7. <div style="margin-top: 65px; width: 415px; height: 265px; margin-left: 514px; overflow: hidden">
   
8. <!-- margin-top为视频 距离上下顶部的距离；width为视频宽度；height为视频高度；margin-left为视频左边靠挤到视频边缘的距离 -->
   
9. 
   
10. <embed allowscriptaccess="never" flashvars="scene=taobao_shop&scene=taobao_shop&scene=taobao_shop" height="265" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="[flash]http://cloud.video.taobao.com//play/u/665298756/p/2/e/1/t/10100/10693297.swf[/flash]" type="application/x-shockwave-flash" width="415" wmode="opaque"></embed></div>
    
11. <!-- .swf此处为你需要投放的视频地址，我们只需替换视频地址即可 --></font>

复制代码

如何实现悬浮效果

1. <div class="J_TWidget mui-mbar" style="height:230px;margin-right:496px;right:50%;margin-top:0px;top:40%;visibility:visible;width:120px;opacity:1;z-index:99;">
   
2. <!-- 此处设置悬浮长和宽，自行调整 -->
   
3.   <div style="display:block;float:left;">
   
4.     <div class="content" style="display:block;float:left;text-align:center;">
   
5.       <a class="follow-btn j_CollectBrand" data-brandid="57017681" data-spm-anchor-id="a1z10.1.0.0" style="cursor:pointer;"> <img src="http://img04.taobaocdn.com/imgextra/i4/665298756/T2EhlPXqhaXXXXXXXX-665298756.gif" /></a></div>
   
6. <!-- <a至>里的为关注代码，根据自己店铺修改，后面为换掉图片 -->
   
7. 
   
8.   </div>
   
9. </div>
   
10. <p>
    
11. 
    
12. 
    
13. <p>
    
14.   <a class="J_CartPluginTrigger" href="http://detail.tmall.com/item.htm?id=19774273337<!-- 此处为商品地址 -->
    
15. &scene=taobao_shop" style="display:block;border:0;"><img src="http://img03.taobaocdn.com/imgextra/i3/665298756/T22D49XAVXXXXXXXXX-665298756.png" /></a></p>
    
16. <!-- 此处为图片地址 -->

复制代码

天猫-旺旺群

1. http://www.taobao.com/go/act/other/wwgroup.php?spm=a1z10.4.w3.4.nbl4x7&uid=&tribeid=群号

复制代码

赠送天猫-悬浮代码

1. <div style="height:10px;width:990px;">
   
2. 
   
3. <div class="tmcPlane" style="visibility:visible;top:0;width:128px;height:auto;left:15px;top:30%;background:none;z-index:99;bottom:200px;margin-left:15px;margin-top:113px;background:url(http://img02.taobaocdn.com/imgextra/i2/94298837/T2Xsh7XrlaXXXXXXXX-94298837.png) no-repeat 0 0 transparent;">
   
4. 
   
5. <a class="follow-btn j_CollectBrand" data-brandid="57017681" href="#"> <img src="http://img01.taobaocdn.com/imgextra/i1/665298756/T2jnabXwJXXXXXXXXX-665298756.png" /></a> <img alt="" height="32" src="http://img01.taobaocdn.com/imgextra/i1/665298756/T2_1yaXsFXXXXXXXXX-665298756.png" width="128" /> <a href="http://img04.taobaocdn.com/imgextra/i4/665298756/T2Gbd.XxRXXXXXXXXX_!!665298756.jpg?&scene=taobao_shop" target="_blank"><img alt="" height="62" src="http://img02.taobaocdn.com/imgextra/i2/665298756/T2OTqaXr4XXXXXXXXX-665298756.png" width="128" /></a> <a href="http://taoquan.taobao.com/coupon/shopbonus/buyer_apply.htm?activityId=76530770&sellerId=665298756&&&&scene=taobao_shop" target="_blank"><img alt="" height="63" src="http://img02.taobaocdn.com/imgextra/i2/665298756/T2HVCcXpdXXXXXXXXX-665298756.png" width="128" /></a> <a href="http://taoquan.taobao.com/coupon/shopbonus/buyer_apply.htm?activityId=76504813&sellerId=665298756&&&&scene=taobao_shop" target="_blank"><img alt="" height="63" src="http://img02.taobaocdn.com/imgextra/i2/665298756/T2tCV_XDFXXXXXXXXX-665298756.png" width="128" /></a> <a href="http://zichen.tmall.com/p/rd550544.htm?spm=a1z10.1.w5001-3208725642.10.IM7y11&&&&&&&scene=taobao_shop" target="_blank"><img alt="" height="161" src="http://img02.taobaocdn.com/imgextra/i2/665298756/T2dqJ.XCxXXXXXXXXX-665298756.png" width="128" /></a> <a href="#top" target="_self"><img alt="" height="61" src="http://img04.taobaocdn.com/imgextra/i4/665298756/T2g5OPXklXXXXXXXXX-665298756.png" width="128" /></a></div>
   
6. 
   
7. </div>

复制代码

不要问我是谁，雷锋！

谢谢分享      

谢谢分享      

人才^_^

牛逼了666666666

我来看看

咋没用呢？显示一半都不到

谢谢分享

试下，谢谢

雷锋你好