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

DIV下拉式菜單(二)

DIV下拉式菜單(二)

更新時間:2019-08-09 文章作者:未知 信息來源:網絡 閱讀次數:

網站建設是指使用標識語言(markup language),通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說,網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIF,JPEG,PNG)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。    你可以把這段程序放在<head></head>標識之間,或是網頁的任意位置。
  接下來,我們還要定義我們的實際菜單項了,這里我們要給每一個菜單項加上一個鼠標的移動事件(OnMouseOver)句柄,并且讓這個事件調用我們上面定義的Show函數。也就是說,當鼠標一進入我們的菜單項中,我們的show函數就開始執行了。這里,我們還要給我們的每個菜單項定義一個ID號,并且把其下拉菜單列的ID名傳入Show函數中,這對我們控制下拉菜單列很關鍵,下面我給出了菜單項的HTML語法描述:
<table border=0>
  <tr>
   <td ID="d1" onmouseover="show(this,ds1);" class="menu">雜志技術站點</td>
   <td ID="d2" onmouseover="show(this,ds2);" class="menu">門戶站點</td>
   <td ID="d3" onmouseover="show(this,ds3);" class="menu">個人收藏站點</td>
  </tr>
</table>
  最后,我們要定義我們的下拉菜單列了。每一個下拉菜單列,我們都要賦予其Submenu的CSS屬性,和一個ID名字好讓我們的Show函數控制它,最后,我們讓他的默認顯示方式為none,也就是讓它不顯示。這是給它的Display樣式賦值“none”來實現的。下面,我給出了下拉菜單列的HTML語法描述:
<DIV ID="ds1" CLASS="submenu" STYLE="display:none">
  <BR><A HREF="http:\\www.yesky.com">天極網 Yesky.com</A>
  <BR><A HREF="http:\\www.cbinews.com">電腦商情報</A>
  <BR><A HREF="http:\\www.newsoft.com.cn">新潮電子</A>
  <BR> 
</DIV> 
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
  <BR><A HREF="http:\\www.sina.com.cn">新浪網 Sina</A>
  <BR><A HREF="http:\\www.sohu.com.cn">搜狐 Sohu</A>
  <BR><A HREF="http:\\www.163.com">網易 Netease</A>
  <BR> 
</DIV>
<DIV ID="ds3" CLASS="submenu" STYLE="display:none">
  <BR><A HREF="http:\\haoel.yeah.net">耗子網絡編程站</A>
  <BR><A HREF="http:\\www.5460.net">中國同學錄</A>
  <BR><A HREF="http:\\www.csdn.net">中國軟件開發網</A>
  <BR> 
</DIV>
  這就是全部的過程了,有了以上四個步驟,你一定可以看見一個菜單了,把它放在你的網頁上吧,一定會很漂亮的。當然,你也可以自己試著改變一下菜單的屬性,讓它更像一個菜單。 大多數人在上網的時候,都會瀏覽網頁提供給我們的信息。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品