|
網(wǎng)站建設(shè)是指使用標識語言（markup language)，通過一系列設(shè)計、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網(wǎng)頁設(shè)計的目的就是產(chǎn)生網(wǎng)站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網(wǎng)站頁面上。 首先看這下面的例子（鼠標移上去）：
類似這樣的仿Windows下拉菜單，在網(wǎng)上是比較常見的，最初出現(xiàn)在微軟網(wǎng)站上，之后被大量效仿。 事實上制作這樣一個模擬菜單也并不是一件很困難的事，比如上面的例子代碼如下： 在講解之前，有一點需要說明的是：筆者在后面講解的代碼都基于當(dāng)前的主流瀏覽器Microsoft Internet Explorer（即我們通常所說的IE）下的。筆者進行調(diào)試的瀏覽器是IE 5.01。另外，這樣一個菜單體現(xiàn)的是HTML/CSS/JavaScript的綜合應(yīng)用，這里并不對一些細節(jié)進行詳細的講解，所以你至少應(yīng)該有一點這方面的基礎(chǔ)。 基本原理 其實，這個菜單實現(xiàn)的原理簡單的說就是：設(shè)置頁面元素的CSS屬性，對其進行定位并設(shè)置其是否可見，然后通過激發(fā)一定的事件，用JavaScript來動態(tài)的改變這些屬性。 看下面幾個CSS屬性： position：定位類型，取值static/absolute/relative，其代表的含義簡單的說即無定位/絕對定位/相對定位； left：距離左側(cè)的位置（具體的參照物與position的設(shè)置有關(guān)），單位為px或%； top：距離頂部的位置（具體的參照物與position的設(shè)置有關(guān)），單位為px或%。 display：頁面元素的顯示狀態(tài)，如取值block表示做為塊狀元素顯示，none則為不顯示，還有其他一些取值（如inline等）這里就不做詳解。 比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了這幾個屬性。 下面我們來看看如何用JavaScript來控制頁面元素的CSS屬性。 對HTML有一定了解的朋友一定清楚，幾乎所有的標記都有一個style屬性，通過設(shè)置這個屬性來設(shè)置該標記的CSS屬性（即CSS的內(nèi)聯(lián)用法）。在JavaScript中，每一個標記都被視為Document對象的一個子對象，而該標記的每一個HTML屬性也都是這個對象的屬性或子對象，style就是其中一個，通過用JavaScript控制style的屬性，就達到了動態(tài)改變頁面元素CSS屬性的目的。如上例中的“onmouseover="myMenu.style.display='block'"”就是一個很普通的用法，其中myMenu即我們所看到的“菜單”的ID，它原來的display為none，即不顯示，當(dāng)鼠標移上去時，變?yōu)閎lock，即塊狀顯示。 另外要提的是：前面只說了如何實現(xiàn)定位、如何動態(tài)控制，那么定位的、控制的是什么元素呢？原則上來講，大部分塊狀元素（如div、table）都可以，而在IE中，div標記（注意，在一些非IE瀏覽器中，并不支持div標記）因其使用的靈活性和方便性而做為我們的首選。上例使用的就是div標記。 好啦，基本的過程，上面大致已經(jīng)說完了，在下一章，我們將看到使用上面提到的技術(shù)來實現(xiàn)一個簡單的菜單。 | |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(),我們會及時處理.
Copyright © 2018-2020 蘿卜系統(tǒng)下載站 手機站 關(guān)于本站
