隨著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">網頁教學網整理</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 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
