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

跳桥轻生的牛

跳桥轻生的牛

2016-02-20 01:15

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

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

1.相对定位(relative)

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


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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)2.绝对定位(absolute)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)!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。

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

展开更多 50%)
分享

猜你喜欢

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

Web开发
CSS入门教程——定位(position)

CSS教程:CSS中的定位(position)

Web开发
CSS教程:CSS中的定位(position)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程:实例讲解定位Position

Web开发
CSS教程:实例讲解定位Position

CSS教程:position 绝对定位的问题

Web开发
CSS教程:position 绝对定位的问题

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS基础教程:CSS中的定位(position)

Web开发
CSS基础教程:CSS中的定位(position)

CSS入门教程——CSS简介

Web开发
CSS入门教程——CSS简介

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

No one is worth your tears in the world

No one is worth your tears in the world

CSS入门教程——CSS简介

CSS入门教程——CSS简介
下拉加载更多内容 ↓