📄 day2_2.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">
<!--
.dpDesc { font:9pt "Comic Sans MS"; text-align: left; color: black}
#timExample { border:1px #FF0000 solid; border-color: #FF0000 solid; height: 91px; width: 140px}
#timExample2 { position: relative; border:1px #FF0000 solid; height: 91px; width: 140px}
#timExample3 { position: relative; left: 200px; border:1px #FF0000 solid; height: 91px; width: 140px}
-->
</style>
<title>网猴：动态HTML</title>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 10px; top: 11px">
<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><strong>第二页 深入</strong></p>
<font size="3">
<p><font face="宋体">动态HTML中大多数的内容都要用到<tt><DIV></tt>标签作为容器。(在<br>
串接样式表和CSS定位的规范草案中规定可以将任何对象<br>
定位，但Netscape的浏览器还不支持这项规定。所以你必须<br>
用<tt><DIV></tt>标签作为类属容器），在容器内加入对象然后再<br>
定位。</font></p>
<p><font face="宋体">我们先为本教程中的范例生成一个box。在本教程的范例中<br>
我们将用网猴的一个编辑Tim作为范例中的主角：</font></p>
</font>
<p><font face="宋体" size="3"><br>
<html><br>
<head><br>
<title>dramatis personae</title><br>
<style><br>
<!--<br>
#tim {position: absolute;<br>
left: 10px;<br>
top: 10px;<br>
width: 140px;<br>
height: 91px;<br>
}<br>
--><br>
</style><br>
</head><br>
<body><br>
<div id="tim"><br>
</div><br>
</body><br>
</html></font></p>
<p><font face="宋体" size="3">这里是box的显示结果（为了辨认的方便，我给它加了一个<br>
红色边框） </font></p>
<div id="timExample">
<dd><img src="http://static.wired.com/webmonkey/98/10/stuff/spacer.gif" id="timSpacer" width="140" height="91"> </dd>
</div>
<p> </p>
<p><font face="宋体" size="3">现在我们有了一个空的box，其ID名称为<tt>tim</tt>，其位置在距窗<br>
口左边10个像素，距窗口顶部10个像素的位置。现在它还没<br>
有体现出动态HTML的魅力，所以我们在这个box中填入Tim的<br>
图片，并给它加一点说明：</font></p>
<p><font face="宋体" size="3"><img src="http://www.webmonkey.com.cn/<br>
dynamic_html/tutor/day2_2btim01.gif" width="41"<br>
height="79" align="LEFT"><br>
<br>
Tim, the hero. Webmonkey editor and resident banjo-picker.</font></p>
<font size="3">
<p><font face="宋体">在3.2版本的HTML的网页（即不能支持动态HTML的网页）<br>
中，你将会注意到文字一直流到屏幕边缘之外，而Tim的图<br>
片朝左浮动。 </font></p>
<div id="timExample2">
<dd><img src="tim01.gif" align="LEFT" width="41" height="79"><span class="dpDesc">Tim, the
hero. Webmonkey editor and resident banjo-picker. </span></dd>
</div>
<p> </p>
<p>实际上是<font face="宋体">它浮动到了本文所在的表格单元的左边。这是一个<br>
重要的区别。当你将HTML放在一个已经被定位了的<tt><DIV></tt>之<br>
内时，你可以把它看作是放在了一个表格单元中（或者象在<br>
其他出版系统之内的制作方法那样）。</font></p>
<p><font face="宋体">在支持HTML 3.2以后的版本的网页中，你可以看到文字自动<br>
回行：</font></p>
</font><div id="timExample3">
<dd><img src="tim01.gif" align="LEFT" width="41" height="79"><span class="dpDesc">Tim, the
hero. <br>
Webmonkey editor <br>
and resident <br>
banjo-picker. </span></dd>
</div>
<p> </p>
<p><font face="宋体" size="3">现在这个<tt><DIV></tt>标签里已经填充了内容，让我们利用CSS-P<br>
的<tt>LEFT</tt>和<tt>TOP</tt>选项技将其定位。</font></p>
<p><font face="宋体" size="3"><br>
<html><br>
<head><br>
<title>dramatis personae</title><br>
<style><br>
<!--<br>
#tim {position: absolute;<br>
left: 300px;<br>
top: 10px;<br>
width: 140px;<br>
height: 91px;<br>
}<br>
--><br>
</style><br>
</head><br>
<body><br>
<div id="tim"><br>
</div><br>
</body><br>
</html><br>
</font></p>
<p><font face="宋体" size="3">显示结果: </font></p>
<div id="timExample3">
<dd><img src="tim01.gif" align="LEFT" width="41" height="79"><span class="dpDesc">Tim, the
hero. <br>
Webmonkey editor <br>
and resident <br>
banjo-picker. </span></dd>
</div><p>
<font size="4"></font><font size="3"><a href="day2_3.html"><font face="宋体">>></font></a></font></p>
<font size="3">
<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> 深入<br>
<font color="#FF0000">第三页</font> <a href="day2_3.html">相对和绝对定位</a></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>
<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 size="3">
</font><font size="3">
<p> </p>
<!--webbot bot="Include" endspan i-checksum="63119" --> </font></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -