快網首頁 | 虛擬主機 | 域名注冊 | 特惠套餐 | 企業郵局 | SQL空間 | IDC業務 | 全球通郵
用CSS的Border屬性制作特效菜單
客服中心新聞動態常見問題常用資料知識學堂走近客服在線提問網站導航
用CSS的Border屬性制作特效菜單
 網頁設計 | 操作系統 | 程序開發 | Dos 命令 | 平面設計 | 辦公軟件

 您的位置:快網首頁 >> 客服中心 >> 知識學堂 >> 網頁設計 >> 文章正文

用CSS的Border屬性制作特效菜單
供稿:潤之康   時間:2009-3-18 14:15:19

    許多應用軟件的主菜單都具有這樣的效果,通常是暗色的,一旦鼠標移到菜單上,立即變明亮;鼠標不在菜單上時是平面的,一旦鼠標移到菜單上,菜單條立即變為立體,從而增強了菜單的效果。你是否也想使網頁中的導航菜單產生這種迷人的效果?那么請看下面這個菜單效果。
    上面這種菜單效果的制作思路是這樣的:利用CSS屬性可以動態改變的特點,我們先定義兩組CSS,一組是鼠標不在菜單上的CSS,另一組是鼠標在菜單上用的CSS。再在onmouseover和onmouseout事件中分別調用不同的CSS就能實現本例的效果了。下面講具體的制作方法:
   1、先作一個1*4的表格,在表格中填入菜單名稱并設置好鏈接;
   2、為了使菜單產生立體效果,實際上只要把菜單的上邊框線和左邊框設置為白色,右邊框線和下邊框線設置為黑色,就能產生立體效果了。在Dreamweaver3中按F7(或點擊快速啟動欄里那個象“八卦圖”似的圖標),調出CSS面板,選擇“none”,再點擊面板下部的編輯圖標,在彈出的“Edit Style Sheet”對話框上按“New”按鈕,在彈出的“New Style”對話框中選擇“Make Custom Style (class)”后,在下面的“Name”輸入框中輸入“.menustyle1”(也就是給要定義的class取個名字,注意前面那個小點不要漏了),按OK,立即彈出“Style Definition for menustyle1”對話框,這時就開始定義CSS的“style1”了。在左邊的選擇窗口中選擇“Border”,在右邊的面板上定義(也是選擇),在“style”屬性中選擇“solid(實線)”;在“Top”中輸入“1”;然后把“Top”“left”的顏色定義為“#FFFFFF”(白色),“bottom”“right”的顏色定義為“#000000”(黑色)。到此,“menustyle1”已全部定義好,按OK返回,在“Edit Style Sheet”對話框上按“Done”按鈕結束。我們再用同樣的方法定義一個“menustyle2”的CSS,在鼠標移開時用,定義的方法相同,只是在定義邊框線顏色時,把四條邊框線的顏色取與菜單背景相同的顏色。在這里順便講一下,直接把邊框線的寬度設置為“0”,也能達到類似的效果,但整個頁面要抖動一下,效果不好。
   3、為了達到整個菜單條在通常是暗色,鼠標在上面時是明亮色的效果,要設置兩個CSS的alpha濾鏡,menustyle3和menustyle4,在Dreamweaver中設置CSS濾鏡在方法上與一般的CSS設置相同(具體可參看“CSS濾鏡應用技巧”專題),只是“alpha”濾鏡的參數較多,其實在這里只要其中的一個參數就行了,我在這里給出CSS代碼,直接加在〈head〉和〈/head〉之間也行。CSS全部設置好后,在〈head〉和〈/head〉之間可見到這樣的代碼:
〈style type="text/css"〉
〈!--
.menustyle1 { border: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF #000000 #000000 #FFFFFF}
.menustyle2 {border:solid;border-width:1px;border-color:#ccccff;}
.menustyle3 {filter:alpha(opacity=60)}
.menustyle4 {filter:alpha(opacity=100)}
.
--〉
〈/style〉
   4、CSS都做好了,下面開始加載到相應的地方去。我們在源代碼中找到第一個菜單項所在的“〈td〉”,在其中加上這樣一行代碼:onmouseover="this.className='menustyle1'" onmouseout="this.className= 'menustyle2'" class="menustyle2",這行代碼的作用是當鼠標在這個菜單上時,使用menustyle1定義的格式,當鼠標移開時使用menustyle2定義的格式,后面那個class="menustyle2"的作用是當前面兩個事件都沒有發生時,仍使用menustyle2格式,從而保證了菜單的一致性。對其它菜單項同樣也加上這行代碼。這樣菜單項就能隨著鼠標的移動而從立體、平面之間相互轉換了! 

    5、在表格的〈table〉標記中加上這樣一行代碼:onmouseover="this.className='menustyle4'" onmouseout="this.className='menustyle3'" class="menustyle3",這行代碼的作用與上面類似,只是這里改變的是透明度,從視覺上產生一種明暗程度相互轉換的效果。

  到此,制作全部結束,按F12看看效果吧!用Dreamweaver3自動生成的CSS代碼稍多一點,若對CSS熟悉的話,可直接編寫,不是用Dreamweaver的網友,也可以把代碼直接加在相應的位置即可。本例旨在拋磚引玉,提出一種方法思路,關鍵在于靈活應用,就可做出許多特殊效果來,如把菜單項由文本換成圖象,效果將大不一樣;把邊框線的顏色改一下,就可獲得象Dreamweaver主菜單那樣,當鼠標在菜單項上時,產生凹下去的效果。

 


快網保留以上說明的最終解釋權
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
   
熱門搜索:FTP 域名 DNS 備案 空間 郵箱 SQL 主機 快網 中文域名 虛擬主機
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
快網客服中心的相關信息:
v 在網頁中插入CSS [2009-3-18 14:14:21]
v CSS產生特殊效果 [2009-3-18 14:11:41]
v css改變鼠標顯示 [2009-3-18 14:08:26]
v CSS教程_CSS容器屬性 [2009-3-18 14:07:20]
v CSS字體屬性CSS字體屬性 [2009-3-18 14:06:00]
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
如果您在使用我們的產品中遇到問題,建議您首先在“常見問題”中查詢解決方法;
如果沒有找到該問題的解決方法,您可以在“問題搜索”中進行搜索;
如果搜索后沒有找到滿意答案,您可以“在線提問”,我們會盡快給您答復。
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
域名注冊查詢中文域名轉碼
域名whois查詢網站PR值查詢
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管

:::::: | 收藏本站 | 關于我們 | 客服中心 | 付款方式 | 聯系我們 | 網站律師 | 工作機會 | 網站地圖 | 產品管理 | ::::::

Copyright (C) 2003-2008 天津追日科技發展有限公司  Cnkuai.cn  快網.cn  中國快網.cn
野草社区在线观看_三分钟免费观看视频_日本最新免费二区三区