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

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

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

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

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

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

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

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

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

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

－－＞＜／ｓｔｙｌｅ＞

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

／／判斷哪個(gè)按鈕被按下的全局變量

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

�牓�

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

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

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

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

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

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

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

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

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

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

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

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

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

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