三衢客栈 www.sqkz.com-如何进行FLASH、播放器、图片等的精确定位

所有网页仅限本站

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

【加入我的收藏】【拷贝本帖地址】

2007-7-3 13:34:00 发表于：实用教程总点击数：4890 总回复数：52

爿登

发表于：实用教程

浏览 4890 次

回复 52 条

2007-7-3 13:34:00

　　我们做帖子经常会遇到在帖子里希望的位置嵌入漂亮的FLASH动画、图片、播放器等等，但是我经常看到有的会员说帖子预览时位置是好的，可是发帖后位置又偏移了，要反复的修改才准确定位。那么如何真正精确的定位呢？使得帖子预览时FLASH位置或播放器位置于发帖后的位置一样，丝毫不偏移呢？下面我说说关于css里的 position 属性。
　　position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。对于后两者，一般应用：
在一个相对定位的元素A里面放置一个绝对定位的元素B，那么不管A的位置如何移动变化，B相对于A的位置就总是不会变的，也就是说，不管你的你帖子的位置在欣赏帖子的页面里如何变化（或左对齐、或右对齐、或居中等），帖子里已经定位的FLASH位置或播放器位置就始终不会变的（我不知道这样说能不能说明白）。下面举例说明：

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

这个是假如嵌入的FLASH
的位置

这个是假如嵌入的播放器
的位置

上面效果的代码：

[运行下面代码]（注：含有JS脚本的代码请慎重运行） [拷贝下面代码]

<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;"> <br>这个是假如嵌入的FLASH<br>的位置</div><div style="position:absolute; left:200px;top:280px; width:200px; height:50px;background:#333333; color:#ffffff; padding:5px;"> <br>这个是假如嵌入的播放器<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 要结合起来用。

以上仅做参考，希望对你做贴有所帮助，如有不对，欢迎批评指正，谢谢！
　　　　　　　　　　　　　　　　　　　　　　　爿登　2007.07.02

[作者于2007-8-26 1:37:00修改]

[1]楼

花儿

发表于：实用教程

2007-7-3 14:06:00

ok 收到下次试试
可以不用高倍显微镜比着调n回了

[2]楼

wxhwzh

发表于：实用教程

2007-7-3 15:36:00

虽然对我而言似懂非懂，但是我会去揣摩尝试的，何况有这么好的老师这么好的学习氛围。
pd老师辛苦了

[3]楼

397055091

发表于：实用教程

2007-7-3 22:42:00

爿登老师辛苦了希望能帖出您更多的做帖心得和学习指导[/size]

[4]楼

mydir

发表于：实用教程

2007-7-5 18:33:00

学习了

[5]楼

mydir

发表于：实用教程

2007-7-5 19:18:00

您好，请教一下，请问如何做一个基本的贴子（有边框，有图片，有文字，有FLASH,有播放器），Thanks!

[6]楼

爿登

发表于：实用教程

2007-7-5 21:16:00

[运行下面代码]（注：含有JS脚本的代码请慎重运行） [拷贝下面代码]

<div align="center"><TABLE id=table1 style="LEFT: -200px; TOP: 0px; WIDTH: 1024px; POSITION: relative" bgcolor="#000000" cellSpacing=0 cellPadding=0 width="1024" border=0 background="背景图片地址。。。。。。"><TBODY><TR><TD align="center" height="768" valign="bottom"><div id="Layer1" style="position:absolute;left: 500px; top: 50px; width:160px; height:35px; z-index:1;"><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="羽化图片地址。。。。"></div><div align="left" id="Layer1" style="color: #666666; line-height: 15pt; position:absolute;left: 50px; top: 500px; width:950px; height:200px; z-index:1;">文字内容。。。。。。。<br></div><EMBED id=myPlayer style="FILTER: ray() Alpha(opacity=100,style=2)" src="音乐地址。。。。。" width=1 height=1 ShowStatusBar="0" type=audio/mpeg volume="0" autostart="true" loop="-1"></EMBED></td></TR></TBODY></TABLE><br><br></div><br><br>

[7]楼

mydir

发表于：实用教程

2007-7-5 21:48:00

回复真快，多谢爿登老师！打印下来,慢慢研究下.

[8]楼

※★风驰★※

发表于：实用教程

2007-7-6 13:38:00

如何把透明FLASH放在图片上面呀

[9]楼

飞飞猪

发表于：实用教程

2007-7-9 0:02:00

我学习还是在学习，谢谢大师提供代码

[作者于2007-7-9 0:26:00修改]

[10]楼

榆木疙瘩

发表于：实用教程

2007-7-21 20:44:00

菜鸟学习中。。。。。

[11]楼

琴瑟琵琶

发表于：实用教程

2007-8-26 1:38:00

代码如下：

[作者于2007-8-26 1:39:00修改]

[12]楼

劲情

发表于：实用教程

2007-9-29 22:15:00

正需要这些教材的时候啊，谢谢爿登大师指点迷津！

[13]楼

魅力苍狼

发表于：实用教程

2007-10-2 12:12:00

http://data1.flash.qq.com/0/0/284/960-1190955385.swf

[14]楼

mxlwyz

发表于：实用教程

2007-10-15 17:15:00

align=centeralign=centeralign=center

[运行下面代码]（注：含有JS脚本的代码请慎重运行） [拷贝下面代码]

<TABLE id=table1 style="LEFT: -200px; TOP: 0px; WIDTH: 1024px; POSITION: relative" bgcolor="#000000" cellSpacing=0 cellPadding=0 width="1024" border=0 background="http://bbs.muwen.com/fileuploaddir/4B26196854.6.gif"><TBODY><TR><TD align="center" height="768" valign="bottom"><div id="Layer1" style="position:absolute;left: 500px; top: 50px; width:160px; height:35px; z-index:1;"><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="http://home.naver.net/brown444/swish/s66-m.swf"></div><div align="center" id="Layer1" style="color: #666666; line-height: 15pt; position:absolute;left: 80px; top: 110px; width:950px; height:900px; z-index:1;font-family: 宋体;font-size: 10.5pt;color: #ff0000;">甜蜜的夜晚<br><br>这宁静的夜晚<br>对于我总是那么的亲切，<br>漆黑的幕布遮住了白昼<br>一切的喧嚣。<br><br>我安坐在窗前<br>透过窗户遥望无垠的空间，<br>迷离在寂静地星河<br>与无比深沉的安宁。<br><br>那月儿与星星<br>可是你的脸庞和眼睛么，<br>那草木间呢喃的微风与幽幽的虫鸣<br>可是你的抚慰和叮咛。<br><br>我的思绪就这样<br>沉落在这无穷无尽的黑夜，<br>在这夜幕的海洋中沉没<br>该是多么甜蜜。<br><br><br></div><EMBED id=myPlayer style="FILTER: ray() Alpha(opacity=100,style=2)" src="" width=1 height=1 ShowStatusBar="0" type=audio/mpeg volume="0" autostart="true" loop="-1"></EMBED></td></TR></TBODY></TABLE><br><br></div><br><br>

[作者于2007-10-15 17:58:00修改]

[15]楼

mxlwyz

发表于：实用教程

2007-10-15 17:55:00

代码如下：

[16]楼

tianmaxk

发表于：实用教程

2007-11-4 16:35:00

学习了,谢谢老师指教!

[17]楼

麦穗

发表于：实用教程

2007-11-7 6:44:00

正需要这些教材的时候啊，谢谢爿登大师指点迷津！正需要这些教材的时候啊，谢谢爿登大师指点迷津！谢谢!

[18]楼

疯狂基因

发表于：实用教程

2008-1-12 11:57:00

[运行下面代码]（注：含有JS脚本的代码请慎重运行） [拷贝下面代码]

<div align="center"><TABLE id=table1 style="LEFT: -200px; TOP: 0px; WIDTH: 1024px; POSITION: relative" bgcolor="#000000" cellSpacing=0 cellPadding=0 width="1024" border=0 background="背景图片地址。。。。。。"><TBODY><TR><TD align="center" height="768" valign="bottom"><div id="Layer1" style="position:absolute;left: 500px; top: 50px; width:160px; height:35px; z-index:1;"><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="羽化图片地址。。。。"></div><div align="left" id="Layer1" style="color: #666666; line-height: 15pt; position:absolute;left: 50px; top: 500px; width:950px; height:200px; z-index:1;">文字内容。。。。。。。<br></div><EMBED id=myPlayer style="FILTER: ray() Alpha(opacity=100,style=2)" src="音乐地址。。。。。" width=1 height=1 ShowStatusBar="0" type=audio/mpeg volume="0" autostart="true" loop="-1"></EMBED></td></TR></TBODY></TABLE><br><br></div><br><br>

[19]楼

MagicFC

发表于：实用教程

2008-1-13 22:42:00

万分感谢!怎么加入字体样式大小颜色等~

这个大概知道了!

的位置

这个是假如嵌入的播放器
的位置

[20]楼

liuxj

发表于：实用教程

2008-1-15 21:24:00

教学很仔细，谢谢爿登老师。

[21]楼

yry789

发表于：实用教程

2008-1-31 11:37:00

我还是一头雾水，慢慢试吧

[22]楼

zyx

发表于：实用教程

2008-2-1 15:17:00

菜鸟学习中,多谢爿登老师!!

[23]楼

sxc

发表于：实用教程

2008-2-11 11:45:00

15楼代码是什么啊？期待。。。。。。。。。。。。。。谢谢

[24]楼

穆水诗

发表于：实用教程

2008-2-23 21:04:00

知道辽,长知识的咯

[25]楼

mazhihong8

发表于：实用教程

2008-3-30 8:48:00

谢过！

[26]楼

yu9521

发表于：实用教程

2008-4-21 0:54:00

高手，高手，高高手

[27]楼

荷塘秋雨

发表于：实用教程

2008-5-6 12:02:00

[运行下面代码]（注：含有JS脚本的代码请慎重运行） [拷贝下面代码]

<div align="center"><TABLE id=table1 style="LEFT: -200px; TOP: 0px; WIDTH: 1024px; POSITION: relative" bgcolor="#000000" cellSpacing=0 cellPadding=0 width="1024" border=0 background="http://www.53199.com/bbs/ftp/uploadfile/images/粉红香颂-3266.jpg<br><TBODY><TR><TD align="center" height="768" valign="bottom"><div id="Layer1" style="position:absolute;left: 500px; top: 50px; width:160px; height:35px; z-index:1;"><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="羽化图片地址。。。。"></div><div align="left" id="Layer1" style="color: #666666; line-height: 15pt; position:absolute;left: 50px; top: 500px; width:950px; height:200px; z-index:1;">文字内容。。。。。。。<br></div><EMBED id=myPlayer style="FILTER: ray() Alpha(opacity=100,style=2)" src="音乐地址。。。。。" width=1 height=1 ShowStatusBar="0" type=audio/mpeg volume="0" autostart="true" loop="-1"></EMBED></td></TR></TBODY></TABLE><br><br></div><br><br>

[28]楼

荷塘秋雨

发表于：实用教程

2008-5-6 12:22:00