随着INTERNET的高速发展，越来越多的人拥有了个人主页，但以往的静态HTML语言，已经不能满足人们的要求。javascript和多层模式表单（Cascading Style Sheet, CSS）的出现使网页更加生动活泼，从而可以获得令人满意的效果。本文以javascript和CSS制作一种浮动菜单的方法为例，来说明其灵活性，同时也是抛砖引玉希望和广大网友共同切磋技术，制作出更好的家页（homepage）.当我们浏览一个超过屏幕显示范围的一个页面时，为了回到菜单项，往往需要向上移动滚动条来完成，而使用浮动菜单则省去了这个麻烦，页面上的浮动菜单选项随着你向上或向下浏览页面而自动的移动。但并不是所有的页面都适合浮动菜单的使用，只有在菜单相对较短，在屏幕上可以完整显示；而正文相对较长，在屏幕上不能全部显示，需要拖动滚动条来完成，使用浮动菜单可以取得意想不到的结果。程序如下： <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"><!-- A{ text-transform: none; text-decoration: none; color:black}A:hover{ color:blue; text-decoration:underline;}--></style> <link href="http://www.webjx.com/templates/webjx/css/style.css" rel="stylesheet" type="text/css" /><title>利用javascript 和CSS制作浮动menu</title></head> <body bgcolor="#FFFFFF"><table width="75%" border="0" align="right"><tr><td><font face="楷体_GB2312" size="5" color="#990033"><b><p align="center"></b></font>利用javascript 和CSS制作浮动menu</td></tr><tr><td><p align="center">网页教学网整理</td></tr><tr><td> 一份名为"HealthCast2010"的全球性医疗保健调查报告显<p>示，在未来几年时间里互联网将给全球医疗保健工业带来巨大</p><p>的变化。调查对象为来自美国、加拿大、英国、澳大利亚、法</p> <p>国、德国、芬兰、新西兰和西班牙的400位医疗保健工业的资深</p><p> ... ... </p><p>顾客数量将随在线药店不同而有所差别，但不取决于医疗机构</p><p>大小。这将对传统的名牌大医院带来很大的冲击。 </td></tr></table> <div id="win0" style="position:absolute; Right:10px; top:10px; width:136px; height:227px; z-index:25"><table width="99%" border="0"><tr> <td background="../9908pic/feature3.gif"><p align="center">【<a href="../all/news.htm">最 新 消 息</a>】</td> </tr> <tr><td background="../9908pic/help3.gif"><p align="center">【<a href="telmedicine.html">远 程 医 疗</a>】</td> </tr> <tr><td background="../9908pic/net3.gif"><p align="center">【<a href="../all/new.htm">新 品 世 界</a>】</td></tr> <tr><td background="../9908pic/living3.gif"> <p align="center">【<a href="../all/syberspace-feature.htm"> 生 活 资 源</a>】 </td></tr> <tr><td background="../9908pic/net3.gif"> <p align="center">【<a href="../all/netware.htm">查 询 技 巧</a>】</td></tr> <tr><td background="../9908pic/free3.gif"> <p align="center">【<a href="software/index.htm" target="_blank">软 件 下 载</a>】</td> </tr><tr><td background="../9908pic/lab3.gif"><p align="center">【<a href="../lab/lab.htm">实 验 传 真</a>】</td></tr><tr><td background="../9908pic/mail3.gif"><p align="center">【<a href="../all/lianxi.htm">联 系 我 们</a>】</td></tr></table></div><script language="javascript"> IE4=(document.all)?1:0if (IE4)setInterval('keepIE("win0",10,10)',1) function keepIE(theName,theWantTop,theWantRight) { theRealTop=parseInt(document.body.scrollTop)theTrueTop=theWantTop+theRealTop document.all[theName].style.top=theTrueTop theRealRight=parseInt(document.body.scrollRight) theTrueRight=theWantRight+theRealRight document.all[theName].style.Right=theTrueRight}</script></body></html>
演示效果如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- A{ text-transform: none; text-decoration: none; color:black} A:hover{ color:blue; text-decoration:underline;} --> </style> <link href="http://www.webjx.com/templates/webjx/css/style.css" rel="stylesheet" type="text/css" /> <title>利用javascript 和CSS制作浮动menu</title> </head> <body bgcolor="#FFFFFF"> <table width="75%" border="0" align="right"> <tr> <td><font face="楷体_GB2312" size="5" color="#990033"> <b><p align="center"></b></font>利用javascript 和CSS制作浮动menu</td> </tr> <tr> <td><p align="center">网页<a class="channel_keylink" href="http://www.mintao.net/Article/Search.asp?Field=Keywords&ClassID=&keyword=%BD%CC%D1%A7&Submit=+%CB%D1%CB%F7+" target="_blank">教学</a>网整理</td> </tr> <tr> <td> 一份名为"HealthCast2010"的全球性医疗保健调查报告 显<p>示，在未来几年时间里互联网将给全球医疗保健工业带来巨大</p> <p>的变化。调查对象为来自美国、加拿大、英国、澳大利亚、法</p> <p>国、德国、芬兰、新西兰和西班牙的400位医疗保健工业的资深</p> <p> ... ... </p> <p>顾客数量将随在线药店不同而有所差别，但不取决于医疗机构</p> <p>大小。这将对传统的名牌大医院带来很大的冲击。 </td> </tr> </table> <div id="win0" style="position:absolute; Right:10px; top:10px; width:136px; height:227px; z-index:25"> <table width="99%" border="0"> <tr> <td background="../9908pic/feature3.gif"> <p align="center">【<a href="../all/news.htm">最 新 消 息</a>】 </td> </tr> <tr> <td background="../9908pic/help3.gif"> <p align="center">【<a href="telmedicine.html">远 程 医 疗</a>】 </td> </tr> <tr> <td background="../9908pic/net3.gif"> <p align="center">【<a href="../all/new.htm">新 品 世 界</a>】 </td> </tr> <tr> <td background="../9908pic/living3.gif"> <p align="center">【<a href="../all/syberspace-feature.htm"> 生 活 资 源</a>】 </td> </tr> <tr> <td background="../9908pic/net3.gif"> <p align="center">【<a href="../all/netware.htm">查 询 技 巧</a>】 </td> </tr> <tr> <td background="../9908pic/free3.gif"> <p align="center">【<a href="software/index.htm" target="_blank">软 件 下 载</a>】 </td> </tr> <tr> <td background="../9908pic/lab3.gif"> <p align="center">【<a href="../lab/lab.htm">实 验 传 真</a>】 </td> </tr> <tr> <td background="../9908pic/mail3.gif"> <p align="center">【<a href="../all/lianxi.htm">联 系 我 们</a>】 </td> </tr></table></div> <script language="javascript"> IE4=(document.all)?1:0if (IE4) setInterval('keepIE("win0",10,10)',1) function keepIE(theName,theWantTop,theWantRight) { theRealTop=parseInt(document.body.scrollTop) theTrueTop=theWantTop+theRealTop document.all[theName].style.top=theTrueTop theRealRight=parseInt(document.body.scrollRight) theTrueRight=theWantRight+theRealRight document.all[theName].style.Right=theTrueRight} </script> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长：MinTao ICP备案号：鄂ICP备11006601号-18
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
