万卷书>>电脑书籍>>网页制作>>HTML教程>>5日学会动态HTML

WANJUANSHU.COM

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


 

由于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所包含的内容底下显示。

 
上一页 WanJuanShu.COM 下一页
WANJUANSHU.COM 万卷书