📄 day2_4.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>
<title>网猴：动态HTML</title>
<style type="text/css">
#aaron {position:absolute;
left: 8px;
top: 31px;
width: 79px;
height: 73px;
z-index: 2
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 12px; top: 20px">
<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><font face="宋体" size="3">第</font><font size="3"><font size="3"><font face="宋体">四页
学习分层技术</font></font></font></strong></p>
<p><font size="3"><font face="宋体">你可以注意到上面的那个布局用表格就能很轻易地做到。但<br>
是串接样式表比表格有一项独特的优势：分层。</font></font></p><font size="3">
<p><font face="宋体">你肯定注意到你无法用表格将几幅图片或文字叠放在一起。<br>
一般情况下，如果人们希望实现这种效果只有制作一幅位<br>
图，在图片中制作出文字或图象叠放在一起的效果，然后将<br>
图片放在网页中。</font></p>
<p><font face="宋体">而利用动态HTML，则可以利用分层顺序将叠放显示各个对<br>
象，例：</font></p>
</font><div id="container2" style="position: absolute; left:400; width:146; height:145; background-color:purple; border: 1px solid purple; layer-background-color: purple" class="example">
<p>Here is Aaron in front of a desk. </p>
<div id="desk2" style="position:absolute; left:10px; top:59px; width:42px; height:8px;">
<dd><img src="extraDesk.gif" width="122" height="48"> </dd>
</div><div id="aaron2" style="position:absolute; left:8px; top:31px; width:79px; height:73px;">
<dd><img src="aaron.gif" width="40" height="71"> </dd>
</div></div><div id="container1" style="position: relative; left:20; width:146; height:145; background-color: blue; border: 1px solid blue; layer-background-color: blue" class="example">
<p>Here is Aaron behind a desk. </p>
<div id="aaron1" style="position:absolute; left:8px; top:31px; width:79px; height:73px;">
<dd><img src="aaron.gif" width="40" height="71"> </dd>
</div><div id="desk1" style="position:absolute; left:10px; top:59px; width:42px; height:8px;">
<dd><img src="extraDesk.gif" width="122" height="48"> </dd>
</div></div>
<ul>
<font size="3">
<p> </p>
<p align="left"><font face="宋体">在这个例子中，Aaron在他的桌子后面，Aaron的图片<br>
首先出现在源代码中：</font> </p>
<ul>
<pre><font face="宋体"><div id="aaron">
<img src="http://www.webmonkey.com.cn/
dynamic_html/tutor/aaron.gif">
</div>
<div id="desk">
<img src="http://www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif">
</div></font></pre>
</ul>
<p><font face="宋体">但是如果我们想让Aaron站在桌子前面，我们可以这样<br>
写HTML代码：</font>
</font>
<ul>
<pre class="dhtmlExamp">
<font size="3"></font><font face="宋体" size="3"><div id="desk">
<img src="http://www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif">
</div>
<div id="aaron">
<img src="</font><font size="3"><font size="2" face="宋体">http://www.webmonkey.com.cn/
dynamic_html/tutor/</font><font face="宋体" size="3">aaron.gif">
</div></font></font></pre>
</ul>
<font size="3">
<p><font face="宋体">这种类型的分层在HTML暗示编写。所以搭建动态HTML<br>
网页的方法之一就是将各个对象按照显示的前后层次<br>
顺序排列排在显示底层的对象最先列出，而排在显示<br>
最上层的对象在源代码顺序的最后列出。但是这种方<br>
式不一定不出问题。很多时候象在源代码中的顺序和<br>
它最后的显示顺序必须没有任何关系。而此时就需要<br>
用到z-index CSS属性。</font></p>
<p><font face="宋体">这里是重新制作后的例子。这次的HTML标识和一起<br>
一样，但是对象采用了明示的z-index。</font></p>
<div id="container4" style="position:absolute; left:400; width:168; height:145; background-color: red; border: 1px solid red; layer-background-color: red; font-size: 10px" class="example">
<p>Aaron has a z-index of 2. The desk has a z-index of 1. </p>
<div id="aaron4" style="position:absolute; left:8px; top:31px; width:79px; height:73px;; z-index: 2">
<dd><img src="aaron.gif" width="40" height="71"> </dd>
</div>
<div id="desk4" style="position:absolute; left:10px; top:59px; width:42px; height:8px;; z-index: 1">
<dd><img src="extraDesk.gif" width="122" height="48"> </dd>
</div>
</div>
<div id="container3" style="position:relative; left:20; width:146; height:145; background-color: blue; border: 1px solid blue; layer-background-color: blue; font-size: 10px" class="example">
<p>Aaron and the desk have an implied z-index. </p>
<div id="aaron3" style="position:absolute; left:8px; top:31px; width:79px; height:73px">
<dd><img src="aaron.gif" width="40" height="71"> </dd>
</div>
<div id="desk3" style="position:absolute; left:10px; top:59px; width:42px; height:8px">
<dd><img src="extraDesk.gif" width="122" height="48"> </dd>
</div>
</div>
<p> </p>
<p><font face="宋体">两个例子的HTML都是相同的，但CSS不同。</font>
<ul>
<font face="宋体">
<p><style type="text/css"> #aaron {position:absolute; left:
8px; top: 31px; width: 79px; height: 73px; z-index: 2 } </style>
</p>
</font>
</ul>
<p><font face="宋体">z-index可以是一个正值或一个负值（带负值的元素将<br>
位于母体元素的下面） ，它所造成的显示效果为：如<br>
果一个对象的z-index比另一个元素大，则z-index为<tt>1</tt><br>
时的视觉效果和Z-index为2时的视觉效果的区别相当于<br>
<tt>1</tt>和<tt>1000</tt>Z之间的区别。</font></p>
<p><a href="day2_5.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> <a href="day2_3.html">相对和绝对定位</a></font><br>
<font face="宋体" size="3"><font color="#FF0000">第四页</font> 学习分层技术<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>
</ul>
</div>
<p><br>
</p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -