⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 19.4.htm

📁 这是我卖的书上的源码 这书是电子邮电出版的是有关网络编程 有详细的例子
💻 HTM
字号:
🔍 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>折叠式下拉菜单</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
  /* 设置菜单样式 */
  .menuHead { font-weight: bold; font-size: larger;  background-color: #9999FF;}
  .menuChoices { background-color: #CC99FF; width: 180px;}
  .menu a {color: #000000; text-decoration: none;}
  .menu a:hover {text-decoration: underline;}  
  /* 菜单定位 */
   #menu1 {position: absolute; top: 80px; left: 10px; width: 180px;}
   #menu2 {position: absolute; top: 80px; left: 190px; width: 180px;}
   #menu3 {position: absolute; top: 80px; left: 370px; width: 180px;}
-->
</style>
<script type="text/javascript">
<!--
/* we'll only allow DOM browsers to simplify things*/
(document.getElementById ? DOMCapable = true : DOMCapable = false);
function hide(menuName)
{
 if (DOMCapable)
  {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'hidden';
  }
}

function show(menuName)
{
 if (DOMCapable)
  {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'visible';
  }
}
//-->
</script>
</head>
<body>
<center><h1>折叠式下拉菜单</h1></center>
<div id="menu1" class="menu" onmouseover="show('menu1');"
 onmouseout="hide('menu1');">

   <div class="menuHead">搜索引擎站点</div>
      <div id="menu1choices" class="menuChoices"> 
        <a href="http://www.google.com">Google</a><br>
        <a href="http://www.yahoo.com.cn">雅虎</a><br>
        <a href="http://www.baidu.com">百度</a><br>
        <a href="http://www.msn.com">MSN</a><br>
        <a href="http://www.dmoz.org">DMOZ</a><br>
      </div>
</div>

<div id="menu2" class="menu" onmouseover="show('menu2');"
 onmouseout="hide('menu2');">
   <div class="menuHead">电子商务站点</div>
      <div id="menu2choices"  class="menuChoices"> 
       <a href="http://www.google.com">Amazon</a><br>
       <a href="http://www.ebay.com">Ebay</a><br>
       <a href="http://www.buy.com">Buy.com</a><br>
      </div>
</div>

<div id="menu3" class="menu" onmouseover="show('menu3');"
 onmouseout="hide('menu3');">
   <div class="menuHead">教程类网站</div> 
      <div id="menu3choices"  class="menuChoices"> 
       <a href="http://www.javascript.com">JavaScriptRef</a><br>
       <a href="http://www.w3c.org">W3C</a><br>
       <a href="http://www.pint.com">PINT</a><br>
      </div>
</div>
<script type="text/javascript">
<!--
/* Don't hide menus for JS off and older browsers */

if (DOMCapable)
 {
  hide("menu1"); 
  hide("menu2");
  hide("menu3");
 }
//-->
</script>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -