萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS相對定位實例技巧介紹

CSS相對定位實例技巧介紹

大家知道CSS相對定位實例技巧嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗,在此拿出來與大家分享下,請大家互相指正。

  1. <html>   

  2. <head>   

  3. <style type="text/CSS">   

  4. h2.pos_left  {  position:relative;  left:-20px  }    

  5. h2.pos_right  {  position:relative;  left:20px  }   

  6. </style> </head>    

  7. <body> <h2>這是位於正常位置的標題</h2>   

  8. <h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>   

  9. <h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>   

  10. <p>相對定位會按照元素的原始位置對該元素進行移動。</p>   

  11. <p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。  

  12. </p>   

  13. <p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。  

  14. </p>   

  15. </body>    

  16. </html>   

相信大家已經學會CSS相對定位實例技巧了吧!感謝大家對我們網站的支持!

相關推薦:

divcss怎樣控制大圖片的網頁寬度呢 

copyright © 萬盛學電腦網 all rights reserved