您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

CSS相对定位实例技巧介绍

作者:佚名    责任编辑:admin    更新时间:2022-06-22

大家知道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怎样控制大图片的网页宽度呢