標題:
[CSS]
CSS定位
[打印本頁]
作者:
kayin
時間:
2004-7-16 10:42 AM
標題:
CSS定位
轉貼自
網站建置百寶箱
我常用CSS定位法,可用的標籤有 "font" 和 "div" 2種參數有 top bottom left right width height等等 單位為 PX (注1) 單位也可以為 + 或者 -
左上定位
<div style='position:absolute;height:1;top:0px;left:0px'>
<img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
</div>
複製代碼
左下定位
<div style='position:absolute;height:1;bottom:0px;left:0px'>
<img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
</div>
複製代碼
右上定位
<div style='position:absolute;height:1;top:0px;right:0px'>
<img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
</div>
複製代碼
右下定位
<div style='position:absolute;height:1;bottom:0px;right:0px'>
<img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
</div>
複製代碼
置中定位
<div style='position:absolute;height:1;top:0px;left:0px;width:100%'>
<center>
<img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
</center>
</div>
複製代碼
左右對稱跑馬燈
<div style='position:absolute;height:1;bottom:0px;left:0px'>
<center>
<marquee width="30" height=500 scrollamount="2" DIRECTION=up style="letter-spacing:1px;Font-Family:新細明體;Font-size:20px; color:6666ff">
我想到了一個忘記溫柔的妳的方法<P>
我不要再想妳<P>
不要再愛妳<P>
不會再提起妳<P>
我的生命中<P>
不曾有妳
</marquee>
</div>
<div style='position:absolute;height:1;bottom:0px;right:0px'>
<marquee width="30" height=500 scrollamount="3" DIRECTION=up style="Font-Family:新細明體;Font-size:20px;color:1eFFcc">
突然忘了揮別的手<p>
含著笑的兩行淚<p>
像一個絕望的孩子<p>
獨自站在懸崖邊<p>
曾經一雙無怨的眼<p>
風雨後依然沒變<p>
匆匆一生遺忘多少容顏<p>
唯一沒忘妳的臉<p>
飄過青春的夢呀<p>
驚醒在沉睡中<p>
我用一轉身離開的妳<p>
用我一輩子去忘記
</marquee>
</center>
</div>
複製代碼
1. 定位也可以是任何位置..把 top bottom left right width height 這些參數做適當調整即可
2. top 和 bottom不能同時使用
3. left 和 right 也不能同時使用
4. 注1:在任何東西的設定上,強烈建議使用PX做單位像是字型如果用PX做單位..解析度改變..也不會改變形狀..如果用PT 會隨解析度變化而改變..一些漂亮ㄉ東西都會變形..PX是解析單位和螢幕一樣..所以不建議使用PT
5. 定位圖層放置於語法越後面,物件在網頁中顯示最上層
歡迎光臨 Kuroshio Ocean Design - 黑潮設計 (http://forum.kod.tw/)
Powered by Discuz! 7.2
