您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>建站知识>>>建站与网页制作知识>>>CSS入门教程——定位(positon)
CSS入门教程——定位(positon)
发表日期:2007/7/19 1:43:00 出处:中国教程网 作者:未知 发布人:gxlan88 已被访问 1747

 

   定位

    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。

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

 

    上篇:CSS入门教程——盒子

    下篇:CSS入门教程——链接

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

山里人网站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:313538590 752398505 联系人:山里人