您的位置:寻梦网首页编程乐园CSS 初步动态HTML 5 天通
动态HTML教程 - 第四天
Taylor 1998.3.9

第二页:下拉菜单脚本

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

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

动态HTML教程
第一页 让我们编写一些有用的东西
第二页 下拉菜单脚本
第三页 使菜单初具规模
第四页 完成菜单条的制作
第五页 使菜单具备相应的功能

[第1天][第2天][第3天][第4天][第5天]


本文本站根据《网猴》相关文章改编,版权归《网猴》所有