CSS入门教程——定位(position)

2016-02-20 01:15 14 1 收藏

下面请跟着图老师小编一起来了解下CSS入门教程——定位(position)，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！

【 tulaoshi.com - Web开发】

定位

CSS的定位功能是很强大的，利用它你可以做出各种各样的网页布局。本节就介绍一些CSS常用的定位语句。

1.相对定位(relative)

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

style type="text/css"
.dingwei{ position:relative;
left:50px;}
/style

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

绝对定位非常好理解，你指定元素出现的坐标(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"
heads
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。

尽管定位的语法非常简单，但是它功能的强大和实用性是不容质疑的。合理的使用定位和盒子等等可以很好的实现主页的布局。

来源:http://www.tulaoshi.com/n/20160220/1633563.html

上一篇： No one is worth your tears in the world
下一篇： CSS入门教程——CSS简介

看过《CSS入门教程——定位(position)》的人还看了以下文章更多>>

CSS入门教程：语法基础

标签： Html CSS布局 Div+CSS XHTML

在学习中遇到问题可以到论坛发贴交流！本例为CSS入门系列教程，在这一课中我们将学习CSS的语法基础，主要学习CSS的基本语法、选择符组、类选择符、ID选择符、包含选择符、样式表的层叠性以及，希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之语法基础 1. 基本语法 CSS的定义是由三个部分构成：选择符（selector），属...

CSS入门教程之CSS的语法

标签： Html CSS布局 Div+CSS XHTML

1.基本语法 CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下： selector { property: value} （选择符 { 属性：值}）选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要...

CSS入门教程:CSS选择器

标签： Web开发

上节课我们讲了一下CSS通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控...

CSS入门教程：CSS的基本语法

标签： Web开发

4.ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代： p id="intro" 这个段落向右对齐 /p 定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两...

CSS入门教程——div和span

标签： Web开发

div和span是什么意思？相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到h1/h1标签，你知道里面是标题，当你看到p/p标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一...

查看更多精彩>>