定位代碼知識及運用方法

空竹翁 2016-01-22

展開全文

定位代碼知識及運用方法

很多朋友多次要求，希望能告訴他們絕對定位代碼和用法，因前面的日記《把一張靜態(tài)圖片做成帶音樂的動畫圖片》用到了圖片和文字、透明動化、播放器、的絕對定位代碼，后來在添加修改該日記時，不小心把代碼搞亂出錯了，一氣之下很久都不想再弄了，到現(xiàn)在也沒去修改，由于很多朋友轉(zhuǎn)去學(xué)習(xí)，該代碼不能用，很多朋友在QQ上問我怎么回事？因我懶、有時又有點忙也沒有都回答，鑒于朋友們對我空間長期的支持、關(guān)注、和信任，在這里將《絕對定位代碼知識及運用方法》向朋友們作出詳細(xì)解答。

絕對定位代碼是我們空間制作愛好者，特別是空間制作高手必不可少用的東西，它不僅僅能美化日記更能實現(xiàn)日記排版布局特殊效果之美化作用，如圖片與圖片融合美化特效、文字放在圖片或透明動化上定位或移動的特殊效果、把圖片弄成“透明”的放在文章上的某位置來實現(xiàn)圖文美化效果、等等。下面就相關(guān)的幾種絕對定位代碼和知識及運用方法和朋友們分享：

一：在圖片上加羽畫圖片的定位代碼：

<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>

認(rèn)識代碼和使用說明：
MARGIN: 0px定義和用法：
margin 簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個值。
這個簡寫屬性設(shè)置一個元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度。
塊級元素的垂直相鄰?fù)膺吘鄷喜?，而行?nèi)元素實際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負(fù)的外邊距值，不過使用時要小心。如果在底圖中應(yīng)用時，通常可以根據(jù)需要來設(shè)置，可以設(shè)為0，
注釋：允許使用負(fù)值。

POSITION: absolute表示絕對定位。

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

left 表示給圖片從左到右定位，上到下定位屬性規(guī)定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。（即；給圖片定位：從左到又的距離?。?br>注釋：如果 "position" 屬性的值為 "static"，那么設(shè)置 "left" 屬性不會產(chǎn)生任何效果。
說明：
對于 static 元素，為 auto；對于長度值，則為相應(yīng)的絕對長度；對于百分比數(shù)值，為指定值；否則為 auto。
對于相對定義元素，left 的計算值始終等于 right。

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

表示給圖片從上到下定位。定位的圖片到頂部的距離，（即上到下的距離?。?br>
WIDTH: 748px 表示底圖寬度，HEIGHT: 368px 表示底圖高度。

style：定義和用法：

style表示圖片所用的風(fēng)格：FILTER:表示起濾器作用：Alpha：濾鏡，羽化，
style=2 表示羽化圖片的效果，可以換設(shè)為0---3，0：圖片原圖效果（無羽化）1：為漸變羽化效果。2：圓行漸變羽化。3：為X型漸變羽化。

應(yīng)用與變通：

我們了解了以上代碼里的屬性后，就可以根據(jù)自己的需要來變通應(yīng)用，來改變你所要求的圖片大小，位置，效果，（如圖片波紋效果，圖片黑白效果，圖片扭曲效果，圖片翻轉(zhuǎn)效果，圖片浮雕效果，圖片倒影效果，水平翻轉(zhuǎn)效果，圖片重影效果，圖片滾動效果（橫向或向上滾動），還可以用不同方法給圖片加框（顏色邊框，粒子狀陰影邊框，等）等用不同方式方法來達(dá)到你想要的美化效果。
“style=”風(fēng)格后面的紫色部分可以更換成你想要的不同圖片效果代碼，（如圖片波紋效果代碼）。

這里介紹幾個自己摸索出來的：絕對定位的代碼：

一：給圖片絕對定位的代碼：

說明：
修改紅色0p參數(shù)數(shù)據(jù) 可以改變定位的任何方位、高、寬、大小。
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>

還有很多的經(jīng)典定位代碼等待添加中、、、、、、

特別提示：以上代碼是放到“THML”里用的，復(fù)制代碼用時要完全、修改里面的地址和數(shù)據(jù)時不能亂動到代碼的空格和符號、標(biāo)點！否則代碼就無效了！