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