注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天帅童子的博客

友好平台,相互交流,看中就拿!

 
 
 

日志

 
 

网易博客最新相对定位在大图上的最简单定位方法  

2017-04-27 22:13:40|  分类: 电脑技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
         属性:代码应用
相对定位的大图应用实例
  编辑:静中有动
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
快乐三八节 - 静中有动 -
       自2014年3月网易对博客系统升级后,对原先的绝对定位代码已经不支持了,只能使用相对定位代码来定位动画、播放器、图片、文字等元素,这就给不太熟悉相对定位代码应用的朋友在背景上正确定位多个元素带来了困难,现将本人掌握的对大图使用最简单的表格排版来实现相对定位的方法介绍给需要的博友。
1、基本要素:
相对定位代码:<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx">要定位的元素代码</DIV>
其中:MARGIN-TOP: Ypx 上下位置,指的是距离上一个元素底部的位置。Y可以是正数、零、负数。
Y=正数时,表示与上一个元素拉开Ypx距离。
Y=零时,表示紧接着上一个元素。
Y=负数时,表示插在上一个元素之中。
其中:MARGIN-LEFT: Xpx 左右位置,指的是距离上一个元素左边的位置。X可以是正数、零、负数。
X=正数时,表示离上一个元素向右拉开Xpx距离。
X=零时,表示紧挨着上一个元素。
X=负数时,表示离上一个元素向左拉开Xpx距离。
2、使用代码:(本例图的背景图由18张条图组成,上放了6个Flash特效和1个音乐)
<TABLE title=静中有动欢迎您 border=0 cellSpacing=0 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD>
<DIV align=center>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片1高度  alt=" " src="图片1地址
" width=图片1宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片2高度 alt=" " src="图片2地址" width=图片2宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片3高度 alt=" " src="图片3地址
" width=图片3宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片4高度 alt=" " src="图片4地址
" width=图片4宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片5高度 alt=" " src="图片5地址
" width=图片5宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片6高度 alt=" " src="图片6地址
" width=图片6宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片7高度 alt=" " src="图片7地址
" width=图片7宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片8高度 alt=" " src="图片8地址
" width=图片8宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片9高度 alt=" " src="图片9地址
" width=图片9宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片10高度 alt=" " src="图片10地址
" width=图片10宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片11高度 alt=" " src="图片11地址
" width=图片11宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片12高度 alt=" " src="图片12地址
" width=图片12宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片13高度 alt=" " src="图片13地址
" width=图片13宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片14高度 alt=" " src="图片14地址
" width=图片14宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片15高度 alt=" " src="图片15地址
" width=图片15宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片16高度 alt=" " src="图片16地址
" width=图片16宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片17高度 alt=" " src="图片17地址
" width=图片17宽度></DIV>
<DIV><IMG title="五一节 - 静中有动 - 静中有动的仙境乐园" height=图片18高度 alt=" " src="图片18地址
" width=图片18宽度></DIV>
</TD></TR></TBODY></TABLE>
<TABLE style="MARGIN-TOP: -图片总高度px; WIDTH: 图片宽度px; HEIGHT: 图片总高度px" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD vAlign=top>
<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx"><EMBED height=Flash1高度 type=application/x-shockwave-flash width=Flash1宽度 src=Flash1地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx"><EMBED height=Flash2高度 type=application/x-shockwave-flash width=Flash2宽度 src=Flash2地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx"><EMBED height=Flash3高度 type=application/x-shockwave-flash width=Flash3宽度 src=Flash3地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx"><EMBED height=Flash4高度 type=application/x-shockwave-flash width=Flash4宽度 src=Flash4地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx"><EMBED height=Flash5高度 type=application/x-shockwave-flash width=Flash5宽度 src=Flash5地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV style="MARGIN-TOP: Ypx; MARGIN-LEFT: Xpx"><EMBED height=Flash6高度 type=application/x-shockwave-flash width=Flash6宽度 src=Flash6地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></DIV>
<DIV><EMBED height=0 type=audio/x-pn-realaudio-plugin width=0 src=音乐地址 wmode="transparent" invokeurls="false" loop="true" allowScriptAccess="never" allowNetworking="internal"></DIV></TD></TR></TBODY></TABLE>
 注释:
1、代码中的上段淡青色代码是图片代码,网易博客日志能显示图片的最大宽度为920像素;
2、代码中的下段白色代码是加Flash特效的代码,在第一个Flash定位后,其他Flash以此进行逐个定位;
 
  评论这张
 
阅读(19)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017