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

 DIV+CSS网页布局中必不可少的就是定位,这一节的知识要和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的位置。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索坐标
, 定位
, 位置
, 元素
, 坐标定位
, 相对
绝对
dreamweavercss教程、dreamweaver css教程、css positon、css定位教程、selenium css定位教程,以便于您获取更多的相关知识。

时间: 2024-10-22 06:57:08

Dreamweaver教程-CSS定位(positon)教程的相关文章

css入门教程:CSS Position 教程

随着知识的CSS定位,你将能够操纵的确切位置的HTML元素.设计,以前需要使用JavaScript或HTML图片地图现在可以这样做完全是在CSS .它不仅是容易的代码,但它也加载更快! 相对位置相对定位变化的立场HTML元素相对的地方通常会出现.如果我们有一个标题,出现在我们上方的网页,我们可以使用相对定位,将它移到有点权,并减少了几个像素.下面就是一个例子. h3 { position: relative; top: 15px; left: 150px; } p { position: rel

CSS网页设计教程:表单Button的Outline

文章简介:CSS网页设计教程:表单Button的Outline. outline的使用,大家都喜欢在reset样式表中直接重置: * {   outline: none; } Eric Meyers在他的CSS Reset是这样重置的: /* remember to define focus styles! */ :focus {     outline: 0; } 这些方法大家都可以说常见了.可是有一点可能大家还是不太清楚--outline在表单的button中使用时,在firefox浏览器下

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

css教程:css+div图文混排

css教程:css图文混排今天我们看看比较高级的css+div进行图文混排吧,我们先来看看下面图的效果图片. 效果还不错吧,我们看看css代码. <dl  class="week1" id="no1">      <dt><a><img src="images/unknow.gif" height="100" width="133"></a><

css div 实例教程

css div入门教程了,下面我们来看看各位也是现在流量的布局div css喽,这种布局想对table 布局来讲确实有一定优势哦了,但是在制作与设计方面确实很难了,好了今天我们就来看个实例教程吧,先看看下面的效果. 这是我们的效果图片了,首页是一张背景图片,然后页我们用li标签或标签都可以实现了,好我们先来看看div  css代码吧,然后再讲教程. <h2><img src="images/deliveryservice.jpg"></h2> <

CSS List 入门教程

CSS List 入门教程,list指得是在css中的li等标签的控制了,面list也有四个属性,其实有五个我们只讲常用的4个了,他们分别为:list-style,list-style-image,list-style-position,list-style-type 好了下面我一个个来举例来说说这个的使用方法与教程吧. 1.CSS list-style 所有属性的列表在一个声明,显示方式,可以继承: list-style实例. ul { list-style: disc outside } o

【转】[转]黑鹰破解基础教程和VIP提高教程+天草破解教程

黑鹰破解基础教程和VIP提高教程+天草破解教程 第一课       破解工具的介绍 第二课       壳的介绍已经脱壳常用思路 第三课       手脱UPX的几种方法 第四课       手脱ASPack的几种方法 第五课       手脱FSG的几种方法 第六课       手脱PECompact的几种方法 第七课       手脱nspack(北斗) 第八课       手脱Yodas Crypter 第九课       手脱Telock 第十课       手脱PETITE和FSG 2

CSS定位:几种类型的position定位的元素

文章简介:定位属性看起来好像很好理解,但它的运作与它在表面所看到的有点儿不一样.你可能会觉得的是相对定位更加类似绝对定位.当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局. 当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作

css定位页面

CSS的4大核心基石:盒子模型.标准流.浮动.定位.只有把这些核心基础掌握到烂熟于胸的程度,才能游刃有余地进行设计. colorandy读者提出这样一个关于页面布局的问题: "如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息.因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观." 这个问题如果在以前使用表格布局,并不困难,只要给页面的最外层表格高度设置为100%就可以了,然而,在Web标准的