| 網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。 { 在以前的ＨＴＭＬ里，元素的位置只能依次排列，我們很難精確地定位與控制網頁中的一些元素。ＣＳＳ２Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，層疊樣式單第二版的布局Ｌａｙｏｕｔ屬性出現并得到瀏覽器的廣泛支持之后，我們不僅可以靜態地實現以上目的，而且可以根據鼠標、鍵盤、時間等預定義好的外界事件動態地改變布局。時下非常流行的網頁中“活動的層”便是它的一種形象的運用，我們這里要講的是如何運用這些屬性結合一些ＤＨＴＭＬ對象在網頁中實現類似Ｗｉｎｄｏｗｓ窗口的下拉菜單（如圖所示）。請看以下代碼及詳細說明。 ＜－－ 以下部分應該插在代碼的＜ｈｅａｄ＞之后 －－＞ ＜ｓｔｙｌｅ＞＜－－ ／ 這是一些ＣＳＳ樣式。其中″ｂｔｎＴＤ″是按鈕在被按下之前“凸起”的樣式類：邊框被設置為寬度為１個像素的實線，其中左邊框和上邊框顏色為淺色（這里為白色），右下邊框為深色（深灰色），如果背景為灰色的ＨＴＭＬ元素（如單元格）使用這個樣式的話，那就非常像一個“凸出”的按鈕；“ｂｔｎＤＴＤ”是按鈕被按下時“凹下”的樣式。 ／ ．ｂｔｎＴＤ ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃８０８０８０ ．ｂｔｎＤＴＤ ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｔｄ ｆｏｎｔ－ｆａｍｉｌｙ 宋體 ｆｏｎｔ－ｓｉｚｅ ９ｐｔ －－＞＜／ｓｔｙｌｅ＞ ＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜－－ ／／判斷哪個按鈕被按下的全局變量 ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０ ／／鼠標經過、離開、點擊更改單元格ＣＳＳ樣式的函數 ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔｏｂｊＳｒｃ ｖａｒ ａｒｇｖａｒｇｃｂｌｎＡｃｔｉｖｅｓｔｒＣｏｌｏｒｓｔｒＢｇＣｏｌｏｒｓｔｒＣｌａｓｓｓｔｒＣｌａｓｓＤｓｔｒＣｕｒｓｏｒ ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓａｒｇｃ＝ａｒｇｖ．ｌｅｎｇｔｈ ／默認情況下不將當前對象置為“激活”／ ｂｌｎＡｃｔｉｖｅ＝ａｒｇｃ＞１﹖ｅｖａｌａｒｇｖ［１］ｆａｌｓｅ ／默認鼠標經過當前對象的樣式為“凸出的按鈕形”／ ｓｔｒＣｌａｓｓ＝ａｒｇｃ＞２ ＆＆ ａｒｇｖ［２］＝′′﹖ａｒｇｖ［２］′ｂｔｎＴＤ′ ／默認鼠標點擊的時候當前對象為“凹下的按鈕形”／ ｓｔｒＣｌａｓｓＤ＝ａｒｇｃ＞３ ＆＆ ａｒｇｖ［３］＝′′﹖ａｒｇｖ［３］′ｂｔｎＤＴＤ′ ／將當前對象激活時候的前景色為白色、背景色為藍色、鼠標樣式為手形／ ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′ｓｔｒＢｇＣｏｌｏｒ＝′＃００００８０′ｓｔｒＣｕｒｓｏｒ＝′ｈａｎｄ′ ／ＩＥ４及其更高版本才支持這些ＪａｖａＳｃｒｉｐｔ對ＣＳＳ樣式的動態改變／ ｉｆｄｏｃｕｍｅｎｔ．ａｌｌ ／／將當前對象的鼠標樣式置為參數傳遞值 ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ ／／如果是鼠標進入當前對象范圍 ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓｅｖｅｎｔ．ｆｒｏｍＥｌｅｍｅｎｔ ／設置為活動樣式／ ｉｆｂｌｎＡｃｔｉｖｅ ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝ｓｔｒＢｇＣｏｌｏｒｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ ／當前對象不需要置為活動樣式的時候，如果本來的樣式是“凸出的按鈕形”則置為“凹下的按鈕形”，反之亦然／ ｅｌｓｅ ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝ｉｎｔＢｌｎＣｌｋ＝０﹖ｓｔｒＣｌａｓｓＤｓｔｒＣｌａｓｓ ／／鼠標離開當前對象區域 ｅｌｓｅ ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓｅｖｅｎｔ．ｔｏＥｌｅｍｅｎｔ ／／將這些樣式置為默認值 ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝′′ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝′′ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝′′ ／ 顯示／隱藏層的通用函數。用ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ作為參數，其中ｏｂｊＮＳ和ｏｂｊＩＥ分別是Ｎｅｔｓｃａｐｅ和ＩＥ的“層”對象，ｓｔｒＳｔｕ為層的狀態。因為篇幅所限，請查看本文尾部說明。 ／ ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ ／ 調用上面的函數，顯示／隱藏參數傳遞的層，這樣是為了簡化代碼。這里不給出詳細函數。／ ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒｉｎｔＣｕｒｒｅｎｔ ／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞ ＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆｗｉｎｄｏｗ．ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′ ｓｈｏｗＬａｙｅｒ１′ｈｉｄｅ′″＞ ＜－－ 以上ｂｏｄｙ部分的作用是當鼠標沒有按下任何按鈕的時候隱藏所有應該隱藏的“菜單”。以下是兩個用ＣＳＳ布局定義的層，名為“ｍｅｎｕ”的層的初始狀態為：在屏幕上的絕對位置為（１２１２），可視，層ｚ－ｉｎｄｅｘ屬性為１００；“ｍｅｎｕ１”為不可視。 －－＞ ＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎａｂｓｏｌｕｔｅｖｉｓｉｂｉｌｉｔｙ ｖｉｓｉｂｌｅｌｅｆｔ１２ｐｘｔｏｐ１２ｐｘ ｚ－ｉｎｄｅｘ １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞ ＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔｔｈｉｓｆａｌｓｅ′ｂｔｎＤＴＤ′ｓｈｏｗＬａｙｅｒ１″＞天極網＜／ｔｄ＞＜／ｔｒ＞ ＜／ｔａｂｌｅ＞＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎａｂｓｏｌｕｔｅｖｉｓｉｂｉｌｉｔｙ ｈｉｄｄｅｎｌｅｆｔ１１ｐｘｔｏｐ３４ｐｘ ｚ－ｉｎｄｅｘ １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞ ＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔｔｈｉｓｔｒｕｅ″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ／／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′ｓｈｏｗＬａｙｅｒ１′ｈｉｄｅ′″＞電腦報讀者俱樂部＜／ｔｄ＞＜／ｔｒ＞ ＜／ｔａｂｌｅ＞＜／ｄｉｖ＞ 因為篇幅所限，一些函數不能詳細給出及說明，如果需要完整代碼請訪問以下鏈接：ｈｔｔｐ／／ｃｔｓｉｇｈｔ．ｔｏｐｃｏｏｌ．ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ．ｈｔｍｌ。 大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(),我們會及時處理.
Copyright © 2018-2020 蘿卜系統下載站 手機站 關于本站
