|
網(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)頁下拉菜單中有幾個比較關(guān)鍵的CSS屬性：position、left、top、display，同時，他們也是style對象的屬性。今天我們就用這幾個基本屬性來實現(xiàn)一個簡單的網(wǎng)頁菜單。 ------------------------------------------------------<html><head><title>菜單實例</title><style type=text/css>td,div { font: normal 12px 宋體; }</style></head><body style="margin-left:12px;margin-top:16px;"><table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC> <tr> <td width=10> </td> <td width=80 align=center onmouseover="menuShow(menu01)" onmouseout="menuHide(menu01)">菜單實例</td> <!-- 上兩行為菜單中顯示的文字，注意這里面的事件觸發(fā)： onmouseover="menuShow(menu01)" 鼠標(biāo)經(jīng)過時顯示菜單； onmouseout="menuHide(menu01)" 鼠標(biāo)移走時隱藏菜單。 參數(shù)menu01即要顯示的菜單的id，將在接下來的代碼中看到。 menuShow與menuHide分別為顯示、隱藏菜單方法，將在后面定義。 --> <td> </td> </tr></table><div style="position:absolute;top:36px;left:20px;display:none;width:80px;height:100px;background-color:#DDDDDD;" id=menu01onmouseover="menuShow(this)" onmouseout="menuHide(this)"><!-- 以上三行，定義了菜單的一些屬性，注意“id=menu01”，前面提到過。 position、top、left、display四個CSS屬性即上一章講過的； width、height、background-color分別為寬度、高度、背景色。 這里再一次出現(xiàn)onmouseover="menuShow(this)" onmouseout="menuHide(this)"， 就是說當(dāng)鼠標(biāo)從菜單按鈕上移開，如果是移到了菜單上，菜單仍然顯示。 注意這里參數(shù)是this而不是menu01，this即對象本身，在這里就是指menu01，所以結(jié)果相同。 在這里筆者有意使用this，只是想告訴大家一個技巧，這在很多時候非常方便。--> <br> 菜單內(nèi)容</div><script language=javascript>function menuShow(menu) //定義顯示菜單的方法，參數(shù)menu即菜單的id。{ menu.style.display='block'; //注意這里如何用JavaScript改變style對象的屬性來達(dá)到改變CSS屬性的目的。}function menuHide(menu) //定義隱藏菜單的方法，參數(shù)menu即菜單的id。{ menu.style.display='none'; //同上}</script></body></html>------------------------------------------------------ 這樣，一個簡單的菜單就實現(xiàn)了，只要你略有一些相關(guān)的基礎(chǔ)知識，反復(fù)體會一下我加的注釋，就應(yīng)該可以理解了，是不是并不難？這個菜單現(xiàn)在看上去還有點簡陋，下次我們將對這個菜單進(jìn)行進(jìn)一步的修飾。 大多數(shù)人在上網(wǎng)的時候，都會瀏覽網(wǎng)頁提供給我們的信息。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(),我們會及時處理.
Copyright © 2018-2020 蘿卜系統(tǒng)下載站 手機(jī)站 關(guān)于本站
