推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

    查看: 750|回复: 0

    [Dreamweaver教程] Dreamweaver教程-CSS定位(positon)教程

    [复制链接]
    发表于 2015-3-4 21:22:25 | 显示全部楼层 |阅读模式
    DIV+CSS网页布局中必不可少的就是定位,Dreamweaver教程-这一节的知识要和CSS盒子模型知识点结果起来理解。
    1.相对定位(relative)
    相对定位是指相对它本来应该处的位置所做的移动。
    ……
    1.   <style type="text/css">
    2.   .dingwei{
    3.    position:relative;
    4.   left:50px;
    5.   }
    6.   </style>
    复制代码

         ……
      <p>我是一段正常的文本</p>
      <p class="dingwei">我本来应该在它的正下方,
      可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>
      </body>
      </html>

    2.绝对定位(absolute)

    绝对定位非常好理解,你指定元素出现的坐标(x,y),然后它就准确无误地显示在那里。
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3.   <html xmlns="http://www.w3.org/1999/xhtml">
    4.   <head>s
    5.   <title>我真惨!被用来演示CSS!</title>
    6.   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    7.   <style type="text/css">
    8.         p{
    9.         font-size:24px;
    10.         font-weight:bold;
    11.         }
    12.         .dingwei1{
    13.       position:absolute;
    14.       top:35px;
    15.       left:35px;
    16.       color:#FF0000
    17.       }
    18.       .dingwei2{
    19.       position:absolute;
    20.       left:50px;
    21.       top:50px;
    22.       color:#0000FF;
    23.       }
    24.   </style>
    25.   </head>
    26.   <body>
    27.   <p class="dingwei1">CSS</p>
    28.   <p class="dingwei2">绝对定位</p>
    29.   </body>
    30.   </html>
    复制代码



    定位中使用的left属性表示元素距离左侧的距离,而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x,而top就是纵坐标y。

    绝对定位其实也是相对定位

    没错,绝对定位会按照我们给定的坐标x,y来准确地定位你一个元素。但是问题在于,坐标系的原点在哪里呢?答案就是父元素。

    上例中,class为"dingwei2"的元素设置为绝对定位,它的父元素为body,所以它其实是相对body位置来定位的的。如果有如下代码:

    <p>
       段落正文
      <strong>强调文字</strong>
    <p>

    若给strong元素设置绝对定位,那么坐标原点将会是父元素p的位置。

    学建站、学推广、学赚钱,上56站长论坛就够了!个性签名请到个人资料里面修改……

    本版积分规则

    关闭

    推56站长论坛推荐上一条 /3 下一条

    站长QQ
    在线咨询
    咨询热线
    QQ:405327411
    站长

    QQ|广告合作|关于我们|联系我们|免责声明|网站导航|站长论坛 ( 豫ICP备11018337号-5

    王宝臣旗下网站 推56论坛(www.tui56.com|ask.tui56.com|blog.tui56.com|daohang.tui56.com)

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表