📄 day4_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}
#menuBar {position: relative; left: 0; top: 0; width: 100%; height: 22px; border: 1px solid #99ffff; background-color: #99ffff; layer-background-color: #99ffff}
#menuBar2 {position: relative; left: 0; top: 0; width: 100%; height: 22px; border: 1px solid #99ffff; background-color: #99ffff; layer-background-color: #99ffff}
.daMenu {position: relative; width: 100px; height: 22px; top: -22px;}
.moreMenu {position: relative; width: 125px; border: 1px solid red; background-color: red; layer-background-color: red; visibility: visible; top: 22px;}
.daMenu2 {position: relative; width: 100px; height: 22px; top: -22px}
#menuBar3 {position: relative; width: 100%; height: 22px; border: 1px solid #99ffff; background-color: #99ffff; layer-background-color: #99ffff}
#moreMonkey {top: -22}
-->
</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>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 19px; top: 16px">
<p> </p>
<table border="0" width="418" 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="宋体">第三页：使菜单初具规模</font></strong></p>
<font size="3">
<p><font face="宋体">下面我们插入一个菜单目录。我们将标题设置为<br>
"Webmonkey" 。</font>
<ul>
<pre><font face="宋体"><style type="text/css">
#menuBar {position: absolute;
left: 0;
top: 0;
width: 100%;
height: 22px;
border: 1px solid #99ffff;
background-color: #99ffff;
layer-background-color: #99ffff;
}
.daMenu {position: absolute;
width: 100px;
height: 22px;
border: 1px solid #99ffff;
top: 0px
}
</style>
...
<div id="menuBar"> </div>
<div id="webmonkey" class="daMenu">
Webmonkey </div> </font></pre>
</ul>
<p><font face="宋体"> 显示结果如下：</font></p>
</font><div id="menuBar"></div><div id="webmonkey" class="daMenu">
<p>Webmonkey</p>
</div><font size="3">
<p><font face="宋体">下面在webmonkey菜单项下加入子菜单：</font>
<ul>
<pre><font face="宋体"><style>
.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
top: 22px;
}
</style>
...
<div id="moreMonkey" class="moreMenu"> Aaron
<br> Captain Cursor
<br> Cassandra
<br> Chris
<br> Courtney
<br> Jeff
<br> Joanne
<br> Jean Pierre
<br> Klug
<br> Kristin
<br> Nadav
<br> Taylor
<br> Thau
<br> Tim
<br> Wendy
<br>
</div> </font></pre>
</ul>
<p><font face="宋体">同其他菜单项结合后显示结果如下：<br>
</font></p>
</font><div id="menuBar"></div><div id="webmonkey2" class="daMenu2">
<p>Webmonkey</p>
</div><div id="moreMonkey" class="moreMenu">
<p>Aaron <br>
Captain Cursor <br>
Cassandra <br>
Chris <br>
Courtney <br>
Jeff <br>
Joanne <br>
Jean Pierre <br>
Klug <br>
Kristin <br>
Nadav <br>
Taylor <br>
Thau <br>
Tim <br>
Wendy</p>
</div><font size="3">
<p><font face="宋体">下面我们为菜单项设定功能。首先要做的是选择<tt>moreMenu</tt><br>
类，并将其隐藏。因为通常情况下，如果你不点击菜单项，<br>
它不会显示子菜单目录。所以，你应该加入下面的代码：</font>
<ul>
<pre><font face="宋体">.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
visibility: hidden;
top: 22px;
}</font></pre>
</ul>
<p><font face="宋体">现在这个<tt>DIV</tt>仍然在页面中，但浏览器不将它显示出来。<a href="day4_4.html">>></a></font></p>
</font>
<p><font face="宋体"><strong>动态HTML教程</strong><br>
<font color="#FF0000">第一页</font> <a href="day4_1.html">让我们编写一些有用的东西</a><br>
<font color="#FF0000">第二页</font> <a href="day4_2.html">下拉菜单脚本</a><br>
<font color="#FF0000">第三页</font> 使菜单初具规模<br>
<font color="#FF0000">第四页</font> <a href="day4_4.html">完成菜单条的制作</a><br>
<font color="#FF0000">第五页</font> <a href="day4_5.html">使菜单具备相应的功能</a></font></p>
<p><font size="3">[<a href="day1_1.html">第1天</a>][<a href="day2_1.html">第2天</a>][<a href="day3_1.html">第3天</a>][第4天][<a href="day5_1.html">第5天</a>]</font></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 size="3">
</font><font size="3"> </font></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -