CSS定位组件CSS 定位方式_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

CSS定位组件CSS 定位方式

作者：闵涛文章来源：闵涛的学习笔记点击数：673 更新时间：2009/4/23 13:46:53

在HTML中并无法直接定义要显示的文字或图文件在画面的那个位置...
只能一顺序来显示...
但是CSS提供3个新的性质运用..
top,left,position...
left相当于x轴，top相当于y轴，position则是绝对(abslute)或者相对(relative)位置..
举个例子：
<html>
<head>
<meta content="text/html; charset=big5" http-equiv=Content-Type>
<title></title>
</head>
<body>
<div style="position:relative;top:250;left:250">显示在(250,250)的位置
<div style="position:relative;top:50;left:50">显示在(300,300)的位置</div>
</div>
</body>
</html>
position会以上一个对象来判断，若是相对则会参考上一个对象的位置来显示...
绝对则是以(0,0)为基准..

另外CSS还有一个z-index的性质...
这个性质就像是z轴一样，可以让网页有立体感，或者说是有层次的感觉....
设定值由 -2|1|0|1|2 (没记错的话)
数值越小表示越底层....

用法如下：

<html>
<head>
<meta content="text/html; charset=big5" http-equiv=Content-Type>
<title></title>
<style>
.style5 { color:black;
font-size=42pt;
font-style:italic;
font-family:"bart normal";
position:absolute;
z-index=0;
top:265;
left:182;
width:450;
height:80;
}
.style7 { font-size=11pt;
font-style:italic;
color:white;
font-family:"arial black";
position:absolute;
top:305;
left:440;
z-index=2;
width:280;
height:60;
}
</style>
</head>
<body>
<div class="style5"><b>DHTML@ ASP</b></div>
<div class="style7"><span style="font-size=22pt">　　Asp </span>Web Database　</div>
</body>
</html>

执行例子你可以看见两行文字有上下之分....
因为z-index一个设定是0，另一个则是2....

对于CSS 定位方式设定大概就是这样...
这些范例在我的网页都有....有兴趣可以看看...
如果以上的内容有误或着有问题的话..
欢迎你mail给我...

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程： CSS字体的详细设定

下一篇教程： CSS字型的设定

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……