[CSS] CSS定位 div, 定位, absolute, position, border

kayin

轉貼自網站建置百寶箱
我常用CSS定位法,可用的標籤有 "font" 和 "div" 2種參數有 top bottom left right width height等等 單位為 PX (注1) 單位也可以為 + 或者 -

左上定位

1. <div style='position:absolute;height:1;top:0px;left:0px'>
   
2. <img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
   
3. </div>

複製代碼

左下定位

1. <div style='position:absolute;height:1;bottom:0px;left:0px'>
   
2. <img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
   
3. </div>

複製代碼

右上定位

1. <div style='position:absolute;height:1;top:0px;right:0px'>
   
2. <img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
   
3. </div>

複製代碼

右下定位

1. <div style='position:absolute;height:1;bottom:0px;right:0px'>
   
2. <img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
   
3. </div>

複製代碼

置中定位

1. <div style='position:absolute;height:1;top:0px;left:0px;width:100%'>
   
2. <center>
   
3. <img src=http://dob.tnc.edu.tw/themes/old/images/logo.jpg border=0>
   
4. </center>
   
5. </div>

複製代碼

左右對稱跑馬燈

1. <div style='position:absolute;height:1;bottom:0px;left:0px'>
   
2. <center>
   
3. <marquee width="30" height=500 scrollamount="2" DIRECTION=up style="letter-spacing:1px;Font-Family:新細明體;Font-size:20px; color:6666ff">
   
4. 我想到了一個忘記溫柔的妳的方法<P>
   
5. 我不要再想妳<P>
   
6. 不要再愛妳<P>
   
7. 不會再提起妳<P>
   
8. 我的生命中<P>
   
9. 不曾有妳
   
10. </marquee>
    
11. </div>
    
12. <div style='position:absolute;height:1;bottom:0px;right:0px'>
    
13. <marquee width="30" height=500 scrollamount="3" DIRECTION=up  style="Font-Family:新細明體;Font-size:20px;color:1eFFcc">
    
14. 突然忘了揮別的手<p>
    
15. 含著笑的兩行淚<p>
    
16. 像一個絕望的孩子<p>
    
17. 獨自站在懸崖邊<p>
    
18. 曾經一雙無怨的眼<p>
    
19. 風雨後依然沒變<p>
    
20. 匆匆一生遺忘多少容顏<p>
    
21. 唯一沒忘妳的臉<p>
    
22. 飄過青春的夢呀<p>
    
23. 驚醒在沉睡中<p>
    
24. 我用一轉身離開的妳<p>
    
25. 用我一輩子去忘記
    
26. </marquee>
    
27. </center>
    
28. </div>

複製代碼

1. 定位也可以是任何位置..把 top bottom left right width height 這些參數做適當調整即可

2. top 和 bottom不能同時使用

3. left 和 right 也不能同時使用

4. 注1:在任何東西的設定上,強烈建議使用PX做單位像是字型如果用PX做單位..解析度改變..也不會改變形狀..如果用PT 會隨解析度變化而改變..一些漂亮ㄉ東西都會變形..PX是解析單位和螢幕一樣..所以不建議使用PT

5. 定位圖層放置於語法越後面,物件在網頁中顯示最上層