CSS教程之Absolute与Relative的使用
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？Div+CSS举行网页结构，得当地使用absolute与relative，能给结构带来意想不到的效果和便利，到达事半功倍…本文先容了关于absolute与relative的使用。
具体解说二者的干系，必要共同例子，请先看例子：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Div+CSSExample,WayhomesBlog</title>
<styletype="text/css">
<!--
body,td,th{font-family:Verdana;font-size:9px;}
-->
</style></head>
<body>
<divstyle="position:absolute;top:5px;right:20px;width:200px;height:180px;background:#00FF00;">
position:absolute;<br/>
top:5px;<br/>
right:20px;<br/>
<divstyle="position:absolute;left:20px;bottom:10px;width:100px;height:100px;background:#00FFFF;">
position:absolute;<br/>
left:20px;<br/>
bottom:10px;<br/>
</div>
</div>
<divstyle="position:absolute;top:5px;left:5px;width:100px;height:100px;background:#00FF00;">
position:absolute;<br/>
top:5px;<br/>
left:5px;<br/>
</div>
<divstyle="position:relative;left:150px;width:300px;height:50px;background:#FF9933;">
position:relative;<br/>
left:150px;<br/>
<br/>
width:300px;height:50px;<br/>
</div>
<divstyle="text-align:center;background:#ccc;">
<divstyle="margin:0auto;width:600px;background:#FF66CC;text-align:left;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<divstyle="padding:20px0020px;background:#FFFF00;">
padding:20px0020px;
<divstyle="position:absolute;width:100px;height:100px;background:#FF0000;">position:<spanstyle="color:#fff;">absolute</span>;</div>
<divstyle="position:relative;left:200px;width:500px;height:300px;background:#FF9933;">
position:<spanstyle="color:blue;">relative</span>;<br/>
left:200px;<br/>
<br/>
width:300px;<br/>
height:300px;<br/>
<divstyle="position:absolute;top:20px;right:20px;width:100px;height:100px;background:#00FFFF;">
position:absolute;<br/>
top:20px;<br/>
right:20px;<br/></div>
<divstyle="position:absolute;bottom:20px;left:20px;width:100px;height:100px;background:#00FFFF;">
position:absolute;<br/>
bottom:20px;<br/>
left:20px;<br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
absolute：相对定位，CSS写法“position:absolute;”，它的定位分两种情形，以下：
1.没有设定Top、Right、Bottom、Left的情形，默许根据父级的“内容地区原始点”为原始点，下面例子白色部分(父级黄色地区有Padding属性，“坐标原始点”和“内容地区原始点”纷歧样)。
2.有设定Top、Right、Bottom、Left的情形，这里又分了两种情形以下：
(1).父级没position属性，扫瞄器左上角(即Body)为“坐标原始点”举行定位，地位由Top、Right、Bottom、Left属性决意，下面例子绿色部分。
(2).父级有position属性，父级的“坐标原始点”为原始点，下面例子浅蓝色部分。
relative：绝对定位，CSS写法“position:relative;”，参照父级的“内容地区原始点”为原始点，无父级则以Body的“内容地区原始点”为原始点，地位由Top、Right、Bottom、Left属性决意，且有“撑开或占有高度”的感化，下面例子橙色部分。
经由过程下面的例子和解说，信任纯熟使用absolute与relative并非一件很坚苦的事，我们四周有很多关于absolute与relative的好例子，好比“网易163收费邮”首页(http://mail.163.com)，内里就有大批的使用。
例子代码在IE5.5、IE6、FF1.5、Opera9测试经由过程
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
页:
[1]