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

美丽伊甸园

maizi欢迎您

 
 
 

日志

 
 

如何进行FLASH、播放器、图片等的精确定位   

2010-01-30 19:51:49|  分类: 怎样装扮博客 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

如何进行FLASH、播放器、图片等的精确定位
发表日期:2008-3-10 14:45:00 出处:三衢客栈 作者:爿登 发布人:lv1211 已被访问 228 次

如何进行FLASH播放器图片等的精确定位 

 

    我们做帖子经常会遇到在帖子里希望的位置嵌入漂亮的FLASH动画、图片、播放器等等,但是我经常看到有的会员说帖子预览时位置是好的,可是发帖后位置又偏移了,要反复的修改才准确定位。那么如何真正精确的定位呢?使得帖子预览时FLASH位置或播放器位置于发帖后的位置一样,丝毫不偏移呢?下面我说说关于css里的 position 属性。

  position 有三个值,static(静态)、relative(相对)、absolute(绝对);由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。 对于后两者,一般应用:

在一个相对定位的元素A里面放置一个绝对定位的元素B,那么不管A的位置如何移动变化,B相对于A的位置就总是不会变的,也就是说,不管你的你帖子的位置在欣赏帖子的页面里如何变化(或左对齐、或右对齐、或居中等),帖子里已经定位的FLASH位置或播放器位置就始终不会变的(我不知道这样说能不能说明白)。下面举例说明:

这是整个帖子的内容。。。

这是整个帖子的内容。。。

这是整个帖子的内容。。。

这是整个帖子的内容。。。

这个是假如嵌入的FLASH

的位置

这个是假如嵌入的播放器

的位置

上面效果的代码:

[拷贝下面代码]  


<table align="center" width="500" height="600" border="1" cellspacing="20" cellpadding="8" bgcolor="#999999">

<TR>

<TD align="center" valign="top" style="position:relative">

这是整个帖子的内容。。。<br>

这是整个帖子的内容。。。<br>

这是整个帖子的内容。。。<br>

这是整个帖子的内容。。。<br>

<div style="position:absolute; left:50px;top:200px; width:200px; height:50px; background:#333333; color:#ffffff; padding:5px;">

这个是假如嵌入的FLASH<br>的位置</div>

<div style="position:absolute; left:200px;top:280px; width:200px; height:50px;background:#333333; color:#ffffff; padding:5px;">

这个是假如嵌入的播放器<br>的位置</div>

</TD>

</TR></table>

  上面代码里的:style="position:absolute; left:50px;top:200px; width:200px; height:50px; background:#333333; color:#ffffff; padding:5px;就是你要精确定位的FLASH或播放器的位置的设置,其中

position:absolute;就是相对于整个帖子的绝对位置的意思,

left:50px;top:200px;就是要精确定位的FLASH或播放器离开帖子左边线和顶边线的距离

width:200px; height:50px; 就是要精确定位的FLASH或播放器的宽度和高度值。

background:#333333; color:#ffffff; padding:5px;分别是背景颜色、字体颜色、边距,这些只和文字内容有关,与定位无关,一般FLASH或播放器定位不需要用这些,这个位置的设定大家一般都会的,都能理解的。

  代码里最关键的是 style="position:relative ,它可以放在TD标签里、也可以放在TR标签里、也可以放在table标签里。本例是放在TD标签里。如果没有这个 style="position:relative 那么你定位好的 FLASH或播放器的位置就不是相对于帖子的绝对位置了,而是相对于整个页面的位置了,就容易偏移或跑动了,就不准确了,这个就和不同的浏览器、不同的页面代码、不同的电脑屏幕分辨率等有关系了,也许你定位是准确的位置,可是别人打开帖子看就可能FLASH或播放器位置偏移了,因为你定位的参考位置不是你的帖子边线。这是问题的关键所在。

  如果你不信,你可以做个简单的实验,把上面的代码复制粘帖到帖子调试里预览试试,帖子调试地址:【帖子调试】 先粘帖后不作任何修改,预览看看,FLASH或播放器的位置是在帖子里的某个位置的,然后你删除TD里的style="position:relative" 再预览看看,帖子位置没变,可是FLASH或播放器的位置就变了,看起来是偏移了很多。因为他们失去了帖子边线的参考位置,只能用整个页面做参考了。这个偏移就大了去了。不同的浏览器,不同的分辨率偏移量都不同,五花八门了。所以,你得记住:

当A的position为relative时,B的position为absolute才有效。也就是说你得先设置一个参考位置,然后你定位的元素才会准确,relative、absolute 要结合起来用。

  评论这张
 
阅读(184)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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