软件发布| 专题库| 优优资讯| 苹果专区| 安卓专区| 软件下载| 首页
优优资讯 电脑教程 安卓教程 安卓攻略 苹果教程 苹果攻略 新闻资讯

Dreamweaver入门教程之CSS定位

时间:2015-02-16 来源:本站整理 我要评论

  网页设计地再漂亮,如果没有合理地布局跟定位就无法让网友引起共鸣。因此,在网页设计过程中,怎样合理地定位是很重要的,接下来我们就来学习Dreamweaver入门教程中CSS定位的内容。

  1.相对定位(relative)

  相对定位是指相对它本来应该处的位置所做的移动。

  ……

  <style type="text/css">

  .dingwei{

  position:relative;

  left:50px;

  }

  </style>

  ……

  <p>我是一段正常的文本</p>

  <p class="dingwei">我本来应该在它的正下方,

  可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>

  </body>

  </html>

  2.绝对定位(absolute)

  绝对定位非常好理解,你指定元素出现的坐标(x,y),然后它就准确无误地显示在那里。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>s

  <title>我真惨!被用来演示CSS!</title>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  p{

  font-size:24px;

  font-weight:bold;

  }

  .dingwei1{

  position:absolute;

  top:35px;

  left:35px;

  color:#FF0000

  }

  .dingwei2{

  position:absolute;

  left:50px;

  top:50px;

  color:#0000FF;

  }

  </style>

  </head>

  <body>

  <p class="dingwei1">CSS</p>

  <p class="dingwei2">绝对定位</p>

  </body>

  </html>

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

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

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

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

  <p>

  段落正文

  <strong>强调文字</strong>

  <p>

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

用户评论

(已有0条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!
快速检索
0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z