CSS教程之Absolute与Relative的使用

只看该作者 · 发表于 2015-1-16 00:15:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

在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">

</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技术的网页，对于搜索引擎的收录更加友好。

只看该作者 · 发表于 2015-1-18 05:47:44

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-1-24 13:46:55

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-2-1 16:39:26

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-2-7 11:24:25

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-2-21 23:54:01

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-6 23:26:06

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-13 23:09:40

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-20 23:26:09

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之Absolute与Relative的使用

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子