頁面菜單詳細說明(1)：基本原理|蘿卜系統下載站

標簽

最新排行

用Dreamweaver模板批量制作web網頁 1
制作主頁的獨門功夫五十招 2
巧用Dreamweaver MX共享Execl XP文件 3
更加便捷實用！巧妙復制主頁內容另一妙法 4
Dreamweaver行為全接觸(3) 5
Dreamweaver經典技巧，一個也不能少 6
用JavaScript在頁面內加入日期 7
使用DW用ASP+ACCESS編寫目錄樹 8
小窗口大學問--玩轉彈出窗口 9
Dreamweaver MX 2004 試用心得 10
實戰DW MX和VSS開發Web項目(下) 11
實戰DW MX和VSS開發Web項目(上) 12

大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。首先看這下面的例子（鼠標移上去）：

菜單實例

　　類似這樣的仿Windows下拉菜單，在網上是比較常見的，最初出現在微軟網站上，之后被大量效仿。事實上制作這樣一個模擬菜單也并不是一件很困難的事，比如上面的例子代碼如下： -------------------------------------------<style type="text/css">td,div { font: normal 12px 宋體; }a { color: #F8F8F8; text-decoration: none; }a:hover { color: #F8F8F8; text-decoration: underline; }</style><div style="background-color:#3366CC;width:68px;text-align:center;padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;" onmouseover="myMenu.style.display='block'" onmouseout="myMenu.style.display='none'"> <div style="position:absolute;width:0px;height:0px;overflow:visible;"> <div class="kriojml" id="myMenu" style="position:absolute;left:-10px;top:18px;display:none; width:90px;background-color:#3366CC;padding:5px;text-align:left;">  Link 1<br>  Link 2<br>  Link 3<br>  ...<br>  Link N<br> 菜單實例-----------------------------------</div></div></div>　　那么下面我們就由淺入深的對這種模擬菜單進行分析講解。

　　在講解之前，有一點需要說明的是：筆者在后面講解的代碼都基于當前的主流瀏覽器Microsoft Internet Explorer（即我們通常所說的IE）下的。筆者進行調試的瀏覽器是IE 5.01。另外，這樣一個菜單體現的是HTML/CSS/JavaScript的綜合應用，這里并不對一些細節進行詳細的講解，所以你至少應該有一點這方面的基礎。

　　基本原理

　　其實，這個菜單實現的原理簡單的說就是：設置頁面元素的CSS屬性，對其進行定位并設置其是否可見，然后通過激發一定的事件，用JavaScript來動態的改變這些屬性。

　　看下面幾個CSS屬性：

　　position：定位類型，取值static/absolute/relative，其代表的含義簡單的說即無定位/絕對定位/相對定位；
　　left：距離左側的位置（具體的參照物與position的設置有關），單位為px或%；
　　top：距離頂部的位置（具體的參照物與position的設置有關），單位為px或%。
　　display：頁面元素的顯示狀態，如取值block表示做為塊狀元素顯示，none則為不顯示，還有其他一些取值（如inline等）這里就不做詳解。

　　比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了這幾個屬性。

　　下面我們來看看如何用JavaScript來控制頁面元素的CSS屬性。

　　對HTML有一定了解的朋友一定清楚，幾乎所有的標記都有一個style屬性，通過設置這個屬性來設置該標記的CSS屬性（即CSS的內聯用法）。在JavaScript中，每一個標記都被視為Document對象的一個子對象，而該標記的每一個HTML屬性也都是這個對象的屬性或子對象，style就是其中一個，通過用JavaScript控制style的屬性，就達到了動態改變頁面元素CSS屬性的目的。如上例中的“onmouseover="myMenu.style.display='block'"”就是一個很普通的用法，其中myMenu即我們所看到的“菜單”的ID，它原來的display為none，即不顯示，當鼠標移上去時，變為block，即塊狀顯示。

　　另外要提的是：前面只說了如何實現定位、如何動態控制，那么定位的、控制的是什么元素呢？原則上來講，大部分塊狀元素（如div、table）都可以，而在IE中，div標記（注意，在一些非IE瀏覽器中，并不支持div標記）因其使用的靈活性和方便性而做為我們的首選。上例使用的就是div標記。

　　好啦，基本的過程，上面大致已經說完了，在下一章，我們將看到使用上面提到的技術來實現一個簡單的菜單。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

頁面菜單詳細說明(1)：基本原理

相關推薦

相關下載

熱門閱覽

最新排行

本類教程下載

系統下載排行