網(wǎng)站建設(shè)是指使用標(biāo)識語言（markup language)，通過一系列設(shè)計、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網(wǎng)頁設(shè)計的目的就是產(chǎn)生網(wǎng)站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。

{ 在以前的ＨＴＭＬ里，元素的位置只能依次排列，我們很難精確地定位與控制網(wǎng)頁中的一些元素。ＣＳＳ２�煟茫幔螅悖幔洌椋睿� Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，層疊樣式單第二版�牭牟季郑煟蹋幔�ｏｕｔ�爩傩猿霈F(xiàn)并得到瀏覽器的廣泛支持之后，我們不僅可以靜態(tài)地實(shí)現(xiàn)以上目的，而且可以根據(jù)鼠標(biāo)、鍵盤、時間等預(yù)定義好的外界事件動態(tài)地改變布局。時下非常流行的網(wǎng)頁中“活動的層”便是它的一種形象的運(yùn)用，我們這里要講的是如何運(yùn)用這些屬性結(jié)合一些ＤＨＴＭＬ對象在網(wǎng)頁中實(shí)現(xiàn)類似Ｗｉｎｄｏｗｓ窗口的下拉菜單（如圖所示）。請看以下代碼及詳細(xì)說明。

＜�牐�－ 以下部分應(yīng)該插在代碼的＜ｈｅａｄ＞之后 －－＞

＜ｓｔｙｌｅ＞＜�牐�－

／�� 這是一些ＣＳＳ樣式。其中″ｂｔｎＴＤ″是按鈕在被按下之前“凸起”的樣式類：邊框被設(shè)置為寬度為１個像素的實(shí)線，其中左邊框和上邊框顏色為淺色（這里為白色），右下邊框?yàn)樯钌�（深灰色），如果背景為灰色的ＨＴＭＬ元素（如單元格）使用這個樣式的話，那就非常像一個“凸出”的按鈕；“ｂｔｎＤＴＤ”是按鈕被按下時“凹下”的樣式。 �潱�

．ｂｔｎＴＤ �� ｂｏｒｄｅｒ－ｌｅｆｔ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� ｂｏｒｄｅｒ－ｒｉｇｈｔ�� １ ｓｏｌｉｄ ＃８０８０８０��

ｂｏｒｄｅｒ－ｔｏｐ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� ｂｏｒｄｅｒ－ｂｏｔｔｏｍ�� １ ｓｏｌｉｄ ＃８０８０８０�� ��

．ｂｔｎＤＴＤ �� ｂｏｒｄｅｒ－ｌｅｆｔ�� １ ｓｏｌｉｄ ＃８０８０８０�� ｂｏｒｄｅｒ－ｒｉｇｈｔ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ��

ｂｏｒｄｅｒ－ｔｏｐ�� １ ｓｏｌｉｄ ＃８０８０８０�� ｂｏｒｄｅｒ－ｂｏｔｔｏｍ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� ��

ｔｄ �� ｆｏｎｔ－ｆａｍｉｌｙ�� 宋體�� ｆｏｎｔ－ｓｉｚｅ�� ９ｐｔ ��

－－＞＜／ｓｔｙｌｅ＞

＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜�牐�－

／／判斷哪個按鈕被按下的全局變量

ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０��

／／鼠標(biāo)經(jīng)過、離開、點(diǎn)擊更改單元格ＣＳＳ樣式的函數(shù)

ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔ�煟铮猓辏樱颍悖牓�

ｖａｒ ａｒｇｖ�煟幔颍纾恽煟猓欤睿粒悖簦椋觯澧煟螅簦颍茫铮欤铮颌煟螅簦颍拢纾茫铮欤铮颌煟螅簦颍茫欤幔螅螈煟螅簦颍茫欤幔螅螅蘑煟螅簦颍茫酰颍螅铮颚�

ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓ�牐幔颍纾悖剑幔颍纾觯�ｌｅｎｇｔｈ��

／�澞�認(rèn)情況下不將當(dāng)前對象置為“激活”�潱�

ｂｌｎＡｃｔｉｖｅ＝�煟幔颍纾悖荆保牘tｅｖａｌ�煟幔颍纾觯郏保荩牔煟妫幔欤螅濡�

／�澞�認(rèn)鼠標(biāo)經(jīng)過當(dāng)前對象的樣式為“凸出的按鈕形”�潱�

ｓｔｒＣｌａｓｓ＝�煟幔颍纾悖荆� ＆＆ ａｒｇｖ［２］�牐健洹洌牘tａｒｇｖ［２］�煛洌猓簦睿裕摹洇�

／�澞�認(rèn)鼠標(biāo)點(diǎn)擊的時候當(dāng)前對象為“凹下的按鈕形”�潱�

ｓｔｒＣｌａｓｓＤ＝�煟幔颍纾悖荆� ＆＆ ａｒｇｖ［３］�牐健洹洌牘tａｒｇｖ［３］�煛洌猓簦睿模裕摹洇�

／�潓�當(dāng)前對象激活時候的前景色為白色、背景色為藍(lán)色、鼠標(biāo)樣式為手形�潱�

ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′�牐螅簦颍拢纾茫铮欤铮颍健洌＃埃埃埃埃福啊洇牐螅簦颍茫酰颍螅铮颍健洌瑁幔睿洹洇�

／�潱桑牛醇捌涓�高版本才支持這些ＪａｖａＳｃｒｉｐｔ對ＣＳＳ樣式的動態(tài)改變�潱�

ｉｆ�煟洌铮悖酰恚澹睿簦�ａｌｌ�牓�

／／將當(dāng)前對象的鼠標(biāo)樣式置為參數(shù)傳遞值

ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ��

／／如果是鼠標(biāo)進(jìn)入當(dāng)前對象范圍

ｉｆ�煛牐铮猓辏樱颍悖�ｃｏｎｔａｉｎｓ�煟澹觯澹睿簦�ｆｒｏｍＥｌｅｍｅｎｔ�牐牓�

／�澰O(shè)置為活動樣式�潱�

ｉｆ�煟猓欤睿粒悖簦椋觯澹牓� ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝ｓｔｒＢｇＣｏｌｏｒ�牐铮猓辏樱颍悖�ｓｔｙｌｅ．ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ�� ��

／�澁�(dāng)前對象不需要置為活動樣式的時候，如果本來的樣式是“凸出的按鈕形”則置為“凹下的按鈕形”，反之亦然�潱�

ｅｌｓｅ ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝�煟椋睿簦拢欤睿茫欤搿牐剑埃牘tｓｔｒＣｌａｓｓＤ�煟螅簦颍茫欤幔螅螃� ��

／／鼠標(biāo)離開當(dāng)前對象區(qū)域

ｅｌｓｅ ｉｆ�煛牐铮猓辏樱颍悖�ｃｏｎｔａｉｎｓ�煟澹觯澹睿簦�ｔｏＥｌｅｍｅｎｔ�牐牓�

／／將這些樣式置為默認(rèn)值

ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝′′�牐铮猓辏樱颍悖�ｓｔｙｌｅ．ｃｏｌｏｒ＝′′�牐铮猓辏樱颍悖�ｃｌａｓｓＮａｍｅ＝′′�� ��

�牓�

／�� 顯示／隱藏層的通用函數(shù)。用ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ作為參數(shù)，其中ｏｂｊＮＳ和ｏｂｊＩＥ分別是Ｎｅｔｓｃａｐｅ和ＩＥ的“層”對象，ｓｔｒＳｔｕ為層的狀態(tài)。因?yàn)槠�幅所限，請查看本文尾部說明。 �潱�

ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ�煟牓煡�

／�� 調(diào)用上面的函數(shù)，顯示／隱藏參數(shù)傳遞的層，這樣是為了簡化代碼。這里不給出詳細(xì)函數(shù)。�潱�

ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒ�煟椋睿簦茫酰颍颍澹睿簦牓煡�

／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞

＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆ�煟鳎椋睿洌铮鳎�ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′�� ｓｈｏｗＬａｙｅｒ�煟雹煛洌瑁椋洌濉洌牎澹�

＜�牐�－ 以上ｂｏｄｙ部分的作用是當(dāng)鼠標(biāo)沒有按下任何按鈕的時候隱藏所有應(yīng)該隱藏的“菜單”。以下是兩個用ＣＳＳ布局定義的層，名為“ｍｅｎｕ”的層的初始狀態(tài)為：在屏幕上的絕對位置為（１２�煟保玻�，可視，層ｚ－ｉｎｄｅｘ屬性為１００；“ｍｅｎｕ１”為不可視。 －－＞

＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ�煟幔猓螅铮欤酰簦濡牐觯椋螅椋猓椋欤椋簦��� ｖｉｓｉｂｌｅ�牐欤澹妫籀煟保玻穑��牐簦铮穰煟保玻穑��� ｚ－ｉｎｄｅｘ�� １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞

＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螅牎� ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螅牎� ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螈煟妫幔欤螅澧煛洌猓簦睿模裕摹洌牔牐螅瑁铮鳎蹋幔�ｅｒ�煟保牎澹咎鞓O網(wǎng)＜／ｔｄ＞＜／ｔｒ＞

＜／ｔａｂｌｅ＞＜／ｄｉｖ＞

＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ�煟幔猓螅铮欤酰簦濡牐觯椋螅椋猓椋欤椋簦��� ｈｉｄｄｅｎ�牐欤澹妫籀煟保保穑��牐簦铮穰煟常矗穑��� ｚ－ｉｎｄｅｘ�� １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞

＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螈煟簦颍酰澹牎� ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螅牎� ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ�煟�／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′�牐螅瑁铮鳎蹋幔�ｅｒ�煟雹煛洌瑁椋洌濉洌牎澹倦娔X報讀者俱樂部＜／ｔｄ＞＜／ｔｒ＞

＜／ｔａｂｌｅ＞＜／ｄｉｖ＞

因?yàn)槠�幅所限，一些函�?shù)不能詳細(xì)給出及說明，如果需要完整代碼請訪問以下鏈接：ｈｔｔｐ�煟�／ｃｔｓｉｇｈｔ．ｔｏｐｃｏｏｌ．ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ．ｈｔｍｌ。