建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > Dreamweaver教程 >

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

更新时间:2017-04-19整理编辑:建站学习网阅读:0

 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的位置。

本文网址:https://www.dedexuexi.com/wysj/dw/3022.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
Dreamweaver图片编辑教程
« 上一篇2017年04月19日
怎样用Dreamweaver下载编辑网页内容
2017年04月19日下一篇 »
  • Dreamweaver CS5-HTML简介
    0阅读
    1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本“更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部...
  • Dreamweaver文档编辑
    0阅读
    快捷键可以提高我们平时的工作效率,今天小编为大家介绍一下dreamweaver中文档编辑快捷键。
  • 色彩模式介绍
    0阅读
    在图象和图形处理软件中,通常都使用了HSB、RGB、Lab及CMYK几种色彩模型,并且具有多种色彩模式,用来反映不同的色彩范围,其中许多模式能用对应的命令相互转换。 (一) HSB模型 基于人类对色
  • Dreamweaver教程:用dw制作图片浏览器
    0阅读
    如图所示,在很多地方我们都看到过这样的图片展示效果 ,通过点击下方的缩略图来展示不同的图片,今天我们就是要来做一下这个效果,其实方法很简单,就是给缩略图添加一个交换图像的
  • DreamweaverMX2004打造留言本详解
    0阅读
    一、IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除程序添加/删除Windows组件对
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录