{ 在以前的ＨＴＭＬ里，元素的位置只能依次排列，我们很难地定位与控制网页中的一些元素。ＣＳＳ２�煟茫幔螅悖幔洌椋睿� Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，层叠样式单第二版�牭牟季郑煟蹋幔�ｏｕｔ�犑粜猿鱿植⒌玫戒�览器的广泛支持之后，我们不仅可以静态地实现以上目的，而且可以根据鼠标、键盘、时间等预定义好的外界事件动态地改变布局。时下非常流行的网页中“活动的层”便是它的一种形象的运用，我们这里要讲的是如何运用这些属性结合一些ＤＨＴＭＬ对象在网页中实现类似Ｗｉｎｄｏｗｓ窗口的下拉菜单（如图所示）。请看以下代码及详细说明。 ＜�牐�－ 以下部分应该插在代码的＜ｈｅａｄ＞之后 －－＞ ＜ｓｔｙｌｅ＞＜�牐�－ ／�� 这是一些ＣＳＳ样式。其中″ｂｔｎＴＤ″是按钮在被按下之前“凸起”的样式类：边框被设置为宽度为１个像素的实线，其中左边框和上边框颜色为浅色（这里为白色），右下边框为深色（深灰色），如果背景为灰色的ＨＴＭＬ元素（如单元格）使用这个样式的话，那非常像一个“凸出”的按钮；“ｂｔｎＤＴＤ”是按钮被按下时“凹下”的样式。 �潱� ．ｂｔｎＴＤ �� ｂｏｒｄｅｒ－ｌｅｆｔ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� ｂｏｒｄｅｒ－ｒｉｇｈｔ�� １ ｓｏｌｉｄ ＃８０８０８０�� ｂｏｒｄｅｒ－ｔｏｐ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� ｂｏｒｄｅｒ－ｂｏｔｔｏｍ�� １ ｓｏｌｉｄ ＃８０８０８０�� �� ．ｂｔｎＤＴＤ �� ｂｏｒｄｅｒ－ｌｅｆｔ�� １ ｓｏｌｉｄ ＃８０８０８０�� ｂｏｒｄｅｒ－ｒｉｇｈｔ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� ｂｏｒｄｅｒ－ｔｏｐ�� １ ｓｏｌｉｄ ＃８０８０８０�� ｂｏｒｄｅｒ－ｂｏｔｔｏｍ�� １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ�� �� ｔｄ �� ｆｏｎｔ－ｆａｍｉｌｙ�� 宋体�� ｆｏｎｔ－ｓｉｚｅ�� ９ｐｔ �� －－＞＜／ｓｔｙｌｅ＞ ＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜�牐�－ ／／判断哪个按钮被按下的全局变量 ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０�� ／／鼠标经过、离开、点击更改单元格ＣＳＳ样式的函数 ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔ�煟铮猓辏樱颍悖牓� ｖａｒ ａｒｇｖ�煟幔颍纾恽煟猓欤睿粒悖簦椋觯澧煟螅簦颍茫铮欤铮颌煟螅簦颍拢纾茫铮欤铮颌煟螅簦颍茫欤幔螅螈煟螅簦颍茫欤幔螅螅蘑煟螅簦颍茫酰颍螅铮颚� ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓ�牐幔颍纾悖剑幔颍纾觯�ｌｅｎｇｔｈ�� ／�澞�认情况下不将当前对象置为“”�潱� ｂｌｎＡｃｔｉｖｅ＝�煟幔颍纾悖荆保牘tｅｖａｌ�煟幔颍纾觯郏保荩牔煟妫幔欤螅濡� ／�澞�认鼠标经过当前对象的样式为“凸出的按钮形”�潱� ｓｔｒＣｌａｓｓ＝�煟幔颍纾悖荆� ＆＆ ａｒｇｖ［２］�牐健洹洌牘tａｒｇｖ［２］�煛洌猓簦睿裕摹洇� ／�澞�认鼠标点击的时候当前对象为“凹下的按钮形”�潱� ｓｔｒＣｌａｓｓＤ＝�煟幔颍纾悖荆� ＆＆ ａｒｇｖ［３］�牐健洹洌牘tａｒｇｖ［３］�煛洌猓簦睿模裕摹洇� ／�澖�当前对象时候的前景色为白色、背景色为蓝色、鼠标样式为手形�潱� ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′�牐螅簦颍拢纾茫铮欤铮颍健洌＃埃埃埃埃福啊洇牐螅簦颍茫酰颍螅铮颍健洌瑁幔睿洹洇� ／�潱桑牛醇捌涓�高版本才支持这些ＪａｖａＳｃｒｉｐｔ对ＣＳＳ样式的动态改变�潱� ｉｆ�煟洌铮悖酰恚澹睿簦�ａｌｌ�牓� ／／将当前对象的鼠标样式置为参数传递值 ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ�� ／／如果是鼠标进入当前对象范围 ｉｆ�煛牐铮猓辏樱颍悖�ｃｏｎｔａｉｎｓ�煟澹觯澹睿簦�ｆｒｏｍＥｌｅｍｅｎｔ�牐牓� ／�澤柚梦�活动样式�潱� ｉｆ�煟猓欤睿粒悖簦椋觯澹牓� ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝ｓｔｒＢｇＣｏｌｏｒ�牐铮猓辏樱颍悖�ｓｔｙｌｅ．ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ�� �� ／�澋鼻岸韵蟛恍枰�置为活动样式的时候，如果本来的样式是“凸出的按钮形”则置为“凹下的按钮形”，反之亦然�潱� ｅｌｓｅ ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝�煟椋睿簦拢欤睿茫欤搿牐剑埃牘tｓｔｒＣｌａｓｓＤ�煟螅簦颍茫欤幔螅螃� �� ／／鼠标离开当前对象区域 ｅｌｓｅ ｉｆ�煛牐铮猓辏樱颍悖�ｃｏｎｔａｉｎｓ�煟澹觯澹睿簦�ｔｏＥｌｅｍｅｎｔ�牐牓� ／／将这些样式置为默认值 ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝′′�牐铮猓辏樱颍悖�ｓｔｙｌｅ．ｃｏｌｏｒ＝′′�牐铮猓辏樱颍悖�ｃｌａｓｓＮａｍｅ＝′′�� �� �牓� ／�� 显示／隐藏层的通用函数。用ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ作为参数，其中ｏｂｊＮＳ和ｏｂｊＩＥ分别是Ｎｅｔｓｃａｐｅ和ＩＥ的“层”对象，ｓｔｒＳｔｕ为层的状态。因为篇幅所限，请查看本文尾部说明。 �潱� ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ�煟牓煡� ／�� 调用上面的函数，显示／隐藏参数传递的层，这样是为了简化代码。这里不给出详细函数。�潱� ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒ�煟椋睿簦茫酰颍颍澹睿簦牓煡� ／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞ ＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆ�煟鳎椋睿洌铮鳎�ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′�� ｓｈｏｗＬａｙｅｒ�煟雹煛洌瑁椋洌濉洌牎澹� ＜�牐�－ 以上ｂｏｄｙ部分的作用是当鼠标没有按下任何按钮的时候隐藏所有应该隐藏的“菜单”。以下是两个用ＣＳＳ布局定义的层，名为“ｍｅｎｕ”的层的初始状态为：在屏幕上的位置为（１２�煟保玻�，可视，层ｚ－ｉｎｄｅｘ属性为１００；“ｍｅｎｕ１”为不可视。 －－＞ ＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ�煟幔猓螅铮欤酰簦濡牐觯椋螅椋猓椋欤椋簦��� ｖｉｓｉｂｌｅ�牐欤澹妫籀煟保玻穑��牐簦铮穰煟保玻穑��� ｚ－ｉｎｄｅｘ�� １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞ ＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螅牎� ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螅牎� ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螈煟妫幔欤螅澧煛洌猓簦睿模裕摹洌牔牐螅瑁铮鳎蹋幔�ｅｒ�煟保牎澹咎旒�网＜／ｔｄ＞＜／ｔｒ＞ ＜／ｔａｂｌｅ＞＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ�煟幔猓螅铮欤酰簦濡牐觯椋螅椋猓椋欤椋簦��� ｈｉｄｄｅｎ�牐欤澹妫籀煟保保穑��牐簦铮穰煟常矗穑��� ｚ－ｉｎｄｅｘ�� １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞ ＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螈煟簦颍酰澹牎� ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ�煟簦瑁椋螅牎� ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ�煟�／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′�牐螅瑁铮鳎蹋幔�ｅｒ�煟雹煛洌瑁椋洌濉洌牎澹镜缒员ǘ琳呔憷植浚迹�ｔｄ＞＜／ｔｒ＞ ＜／ｔａｂｌｅ＞＜／ｄｉｖ＞ 因为篇幅所限，一些函数不能详细给出及说明，如果需要完整代码请访问以下链接：ｈｔｔｐ�煟�／ｃｔｓｉｇｈｔ．ｔｏｐｃｏｏｌ．ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ．ｈｔｍｌ。