📄 day2_3.html
字号:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: purple; text-decoration: underline}
.unnamed1 { font-family: "宋体"; font-size: 9pt}
-->
</style>
<style>
<!--#menu {position: absolute;
left: 1px;top: 174px;width: 163px;height: 300px;}
-->
</style>
<style>
<!--#content {position: absolute;
left: 175px;top: 184px;width: 435px;height: 300px;}
-->
</style>
<style type="text/css">
<!--
.absPos { color: #FF0000; position: absolute; left:200px}
.relPos { color: #FF0000; position:relative; left:200px}
.relPos2 { color: #FF0000; position:relative; left:200px ; top: 20px}
-->
</style>
<title>网猴：动态HTML</title>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 18px; top: 25px">
<table border="0" width="600" cellspacing="0">
<tr>
<td bgcolor="#ffff99" colspan="2"><font size="4" color="#000000"><strong>动态HTML教程
- 第二天</strong></font></td>
</tr>
<tr>
<td bgcolor="#FF6600" colspan="2"><em><font size="4"><a href="mailto:taylor@taylor.org">Taylor</a>
</font><font size="3">1998.3.9</font></em></td>
</tr>
</table>
<p><font face="宋体" size="3">第</font><font size="3"><font size="3"><font face="宋体">三页
相对和绝对定位</font></font></font></p>
<font size="3">
<p><font face="宋体">你可能会注意到在本例中我使用了相对定位。在相对定位和<br>
绝对定位中有一个很微妙但确确实实的区别。 </font></p>
<p><font face="宋体">当你将一个对象用绝对定位指令定位时，你实际将其从你<br>
的HTML文件流中抽了出来，将其直接根据网页的左上角的位<br>
置进行定位。这种情况下各个对象有可能互相重叠在一起。 </font></p>
<p><font face="宋体">相对定位并不指根据百分比值或其他某个元素的位置来定位<br>
这个元素的位置。它实际占据的就是它在这个HTML文件中的<br>
位置，它的定位起点基于HTML页所在的位置，这里是一个<br>
例子：</font>
<ul>
<tt>
<p>Tim, the hero. <span class="absPos" style="left: 167px; top: 298px">Webmonkey</span>
editor and resident banjo-picker.</p>
<p>Tim, the hero. <span class="relPos">Webmonkey</span> editor and resident
banjo-picker.</p>
</tt>
</ul>
<p><font face="宋体" size="3">这两个句子中，单词<tt>Webmonkey</tt>都定位在距左边200像素的<br>
位置。第1个句子用的是绝对定位，第2个用的是相对定位。<br>
注意相对定位的句子中空出了相当于单词<tt>Webmonkey</tt>长度的<br>
空间，而绝对定位了的句子中没有这个空间，如果我给两个<br>
句子都加一个"top"参数值，则你会看到绝对定位了的句子<br>
将飘在文章的顶部，而相对定位的句子则就在它所在的句子<br>
的位置之下：</font>
<ul>
<tt>
<p>Tim, the hero. <span class="relPos2">Webmonkey</span> editor and resident
banjo-picker.</p>
</tt>
</ul>
<font size="3">
<p><font face="宋体">现在我们已经了解了两种定位的不同。我们作一个小练习。<br>
我们用CSS-P作一个网页。这里是该网页的<a href="day2_3screenshot.htm" target="_new">屏幕快照</a>。试着<br>
做出这个网页，然后我们将制作更复杂的布局（提示：你可<br>
以用这个屏幕快照中的图象作为网页背景图象来帮助你定<br>
位。注意将字体采用<a href="http://www.microsoft.com/typography/web/fonts/comicsns/default.htm">Comic
Sans MS</a>）。</font></p>
</font>
<p><a href="day2_4.html"><font face="宋体" size="3">>></font></a></p>
<p> <font size="4"><strong>动态HTML教程</strong><br>
</font><font face="宋体" size="3"><font color="#FF0000">第一页</font> <a href="day2_1.html">动态HTML教程
- 第二天</a><br>
<font color="#FF0000">第二页</font> <a href="day2_2.html">深入</a><br>
<font color="#FF0000">第三页</font> 相对和绝对定位</font><br>
<font face="宋体" size="3"><font color="#FF0000">第四页</font> <a href="day2_4.html">学习分层技术</a><br>
<font color="#FF0000">第五页</font> <a href="day2_5.html">家庭作业</a></font></p>
<p>[<a href="day1_1.html">第1天</a>][第2天][<a href="day3_1.html">第3天</a>][<a href="day4_1.html">第4天</a>][<a href="day5_1.html">第5天</a>]</p>
<font size="3">
<hr>
</font><font face="verdana, arial, geneva, sans-serif" size="2">本文由<a href="http://chd.126.com" target="_blank">《CHD的网络教室》</a>根据<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>相关文章改编，版权归<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>所有</font></font><font size="3"><font size="3">
</font></font></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -