定位代码知识及运用方法

空竹翁 2016-01-22

展开全文

定位代码知识及运用方法

很多朋友多次要求，希望能告诉他们绝对定位代码和用法，因前面的日记《把一张静态图片做成带音乐的动画图片》用到了图片和文字、透明动化、播放器、的绝对定位代码，后来在添加修改该日记时，不小心把代码搞乱出错了，一气之下很久都不想再弄了，到现在也没去修改，由于很多朋友转去学习，该代码不能用，很多朋友在QQ上问我怎么回事？因我懒、有时又有点忙也没有都回答，鉴于朋友们对我空间长期的支持、关注、和信任，在这里将《绝对定位代码知识及运用方法》向朋友们作出详细解答。

绝对定位代码是我们空间制作爱好者，特别是空间制作高手必不可少用的东西，它不仅仅能美化日记更能实现日记排版布局特殊效果之美化作用，如图片与图片融合美化特效、文字放在图片或透明动化上定位或移动的特殊效果、把图片弄成“透明”的放在文章上的某位置来实现图文美化效果、等等。下面就相关的几种绝对定位代码和知识及运用方法和朋友们分享：

一：在图片上加羽画图片的定位代码：

<DIV align=center _fromEd="true"><IMG style="MARGIN: 0px; WIDTH: 748px; HEIGHT: 368px" src="底图地址" border=0>
<DIV style="LEFT: 10px; POSITION: absolute; TOP: 12px" align=right><IMG style="FILTER: alpha(opacity=90, finishOpacity=0,style=2)" src="要在底图上加的羽画图片的地址"></DIV>

认识代码和使用说明：
MARGIN: 0px定义和用法：
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。如果在底图中应用时，通常可以根据需要来设置，可以设为0，
注释：允许使用负值。

POSITION: absolute表示绝对定位。

left 定义和用法：（LEFT: 10px）

left 表示给图片从左到右定位，上到下定位属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。（即；给图片定位：从左到又的距离！）
注释：如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。
说明：
对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。
对于相对定义元素，left 的计算值始终等于 right。

TOP: 定义和用法：（TOP: 12px）

表示给图片从上到下定位。定位的图片到顶部的距离，（即上到下的距离！）

WIDTH: 748px 表示底图宽度，HEIGHT: 368px 表示底图高度。

style：定义和用法：

style表示图片所用的风格：FILTER:表示起滤器作用：Alpha：滤镜，羽化，
style=2 表示羽化图片的效果，可以换设为0---3，0：图片原图效果（无羽化）1：为渐变羽化效果。2：圆行渐变羽化。3：为X型渐变羽化。

应用与变通：

我们了解了以上代码里的属性后，就可以根据自己的需要来变通应用，来改变你所要求的图片大小，位置，效果，（如图片波纹效果，图片黑白效果，图片扭曲效果，图片翻转效果，图片浮雕效果，图片倒影效果，水平翻转效果，图片重影效果，图片滚动效果（横向或向上滚动），还可以用不同方法给图片加框（颜色边框，粒子状阴影边框，等）等用不同方式方法来达到你想要的美化效果。
“style=”风格后面的紫色部分可以更换成你想要的不同图片效果代码，（如图片波纹效果代码）。

这里介绍几个自己摸索出来的：绝对定位的代码：

一：给图片绝对定位的代码：

说明：
修改红色0p参数数据可以改变定位的任何方位、高、宽、大小。
align=center :表示居中对齐.

二：给雾化图片定位代码：

说明：

决定从左到右的位置：LEFT: 100px; 改变上下的位置：TOP: 2px

紫色部分表示图片雾化效果代码

三：全方位绝对定位的透明图片特效代码：

全方位绝对定位的透明图片特效雾化代码：

1：<DIV style="LEFT: 360px; POSITION: absolute; TOP: 12px" align=center _fromEd="true"><IMG style="MARGIN: 0px; WIDTH: 148px; HEIGHT: 768px" IMG style="FILTER: alpha(opacity=90, finishOpacity=0,style=2)" src="http:///n0nVQRO1" border=0> </DIV>

2； <DIV style="LEFT: 100px; POSITION: absolute; TOP: 170px" align=center _fromEd="true"><IMG style="FILTER: alpha(opacity=90, finishOpacity=0,style=2); MARGIN: 0px; WIDTH: 750px; HEIGHT: 633px" src="http:///n0nVQRO1" border=0 IMG> </DIV>

说明：MARGIN: 0px:可以改变上下左右位置！透明图片特效：就象我们平时加FLASHS一样，可以在把它放到版面上的任何位置！而且完全可以自由决定它的大小！
我们平时能在图片上加文字，透明图片特效：它不但能在图片上加图片，还能在文字上加上图片。绝吧？
我们用它在图片上，加上自己的的相片，完全能决定位置和大小，采用雾化效果后，加在云上还能让自己变成神仙哟。
注意：要在有背景图片或文章中，用才能看到效果的！

四：给文字绝对定位代码：

<DIV style="LEFT: 260px; POSITION: absolute; TOP: 2px" align=center _fromEd="true"><STRONG><FONT color=#d8d8d8>明月独依楼编制QQ435904306</FONT></STRONG> </DIV>

五：给动画素材（FLASHS）绝对定位代码：

六：在（羽化）图片上加字和文字定位：

<TABLE style="FILTER: Alpha(opacity=300,style=2); BACKGROUND-IMAGE: url(图片地址)" borderColor=#cccccc height=433 cellSpacing=8 cellPadding=8 width=650 align=right bgColor=#000000 border=0>
<TBODY>
<TR>
<TD align=middle>
<P>这里写你要加的字<BR>在html语言中BR表示换行 <BR></P></TD></TR></TBODY></TABLE>

七：给播放器定位：

八：同步音乐定位代码：

<DIV style="LEFT: 10px; POSITION: absolute; TOP: 200px" align=center _fromEd="true"><STRONG>这里加完整的同步音乐代码</FONT></STRONG> </DIV>

还有很多的经典定位代码等待添加中、、、、、、

特别提示：以上代码是放到“THML”里用的，复制代码用时要完全、修改里面的地址和数据时不能乱动到代码的空格和符号、标点！否则代码就无效了！