动态HTML教程（四）

【 tulaoshi.com - Html 】

    没关系，今天的教程就是针对你这样的问题制作的。今天我们将建立几个用户界面元素，处理用户事件，动态改变背景，自动变换网页内容以及显示或隐藏某些页面对象。 所有这些内容都有很强的实用性。

    你最好能先阅读Javascript教程中关于链接事件的课程，以便对用户事件具备初步的了解。在今天的课程中将经常用到链接事件。 

    让我们编写一些我们所熟悉的用户界面元素－－下拉菜单，子菜单。这些元素和你现在正在浏览的窗口顶部的菜单条很类似。大多数都有一个类属专用接口工具集，当你需要应用下拉菜单时就可调用该工具集。然后你可以设定被选项目的的名称和执行的行为。 

    由于HTML不包含这样的专用接口工具集，所以你必须建立自己的工具集。首先你必须描述它的外观。我们在菜单条上加入一定的颜色以及描述各项功能的名称，例如file、edit、view等等。当你点击该文字时，就会显示该菜单项下的子菜单。在子菜单框中点击相应的菜单项目就可触发某个执行程序的行为。让我们在HTML中编写这样的菜单。

    首先，你需要生成一个DIV作为顶部的菜单条： 

 <div id="menuBar" </div
现在将该菜单条放在页面顶部，加上特定的颜色： 

 <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;
         }
</style 
则生成这样一个DIV：

    你可能会对最后一条CSS规范不知所以然，这项是Netscape 对CSS的扩展，它指的是绝对定位了的元素的背景色。由于边框设置为border: 1px solid #99ffff;，所以有必要加入这一条使背景色延伸到DIV的边框。否则背景色只能在DIV所包含的内容底下显示。 

    下面我们插入一个菜单目录。我们将标题设置为"Webmonkey" 。 

 <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  
 显示结果如下：