当前位置：首页 -> 网页设计 -> DREAMWEAVER -> 网页菜单详解(2):初步实现

网页菜单详解(2):初步实现

时间： 2021-07-31 作者：daque

模仿网页下拉菜单中有几个比拟要害的css属性：position、left、top、display，同声，她们也是style东西的属性。即日咱们就用这几个基础属性来实行一个大略的网页菜单。　　开始请大师看笔者仍旧做好的一个范例，而后咱们对这个例子举行精细代码解说。　　为大师观赏简单，这边沿用在代码中加解释的办法，赤色局部为解释。代码如次：------------------------------------------------------<html><head><title>菜单范例</title><style type=text/css>td,div { font: normal 12px 宋体; }</style></head><body style="margin-left:12px;margin-top:16px;"><table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#cccccc> <tr> <td width=10> </td> <td width=80 align=center onmouseover="menushow(menu01)" onmouseout="menuhide(menu01)">菜单范例</td>  <td> </td> </tr></table><div style="position:absolute;top:36px;left:20px;display:none;width:80px;height:100px;background-color:#dddddd;" id=menu01onmouseover="menushow(this)" onmouseout="menuhide(this)"> <br> 菜单实质</div><script language=javascript>function menushow(menu) //设置表露菜单的本领，参数menu即菜单的id。{ menu.style.display='block'; //提防这边怎样用javascript变换style东西的属性来到达变换css属性的手段。}function menuhide(menu) //设置湮没菜单的本领，参数menu即菜单的id。{ menu.style.display='none'; //同上}</script></body></html>------------------------------------------------------　　如许，一个大略的菜单就实行了，只有你略有少许关系的普通常识，重复领会一下我加的解释，就该当不妨领会了，是否并不难？　　这个菜单此刻看上去再有点大略，下次咱们将对这个菜单进前进一步的化装。

网页菜单详解(2):初步实现

相关推荐

推荐下载

热门阅览

最新排行