基于css技術的下拉菜單制作_第1頁
基于css技術的下拉菜單制作_第2頁
基于css技術的下拉菜單制作_第3頁
基于css技術的下拉菜單制作_第4頁
基于css技術的下拉菜單制作_第5頁
全文預覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

基于css技術的下拉菜單制作

0優(yōu)化網(wǎng)頁布局,實現(xiàn)技術互聯(lián)隨著網(wǎng)絡技術的發(fā)展，網(wǎng)絡技術在社會生活的各個領域中滲透?；ヂ?lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道,Internet上發(fā)布信息主要是通過網(wǎng)站來實現(xiàn)的,網(wǎng)頁作為網(wǎng)站呈現(xiàn)給用戶的界面,是制作網(wǎng)站必不可少的一部分。導航是網(wǎng)頁中非常重要的一項功能,各式各樣的網(wǎng)站都要用到導航菜單,便于用戶了解整個網(wǎng)站的內(nèi)容結(jié)構(gòu),有選擇性地瀏覽自己所需的內(nèi)容。傳統(tǒng)的導航有豎直或水平方向排列的菜單,但是當網(wǎng)站的內(nèi)容比較豐富,結(jié)構(gòu)比較復雜的時候,一級導航菜單往往就不夠用了,這時就需要多級菜單來實現(xiàn)層次結(jié)構(gòu)。下拉菜單是網(wǎng)頁上最常見的效果之一,用鼠標輕輕一點或是移過去,就出現(xiàn)一個更加詳細的子菜單,它不僅節(jié)省了網(wǎng)頁排版的空間,而且使網(wǎng)頁布局簡潔有序。在早期的網(wǎng)站上,制作多級菜單是件很麻煩的事情,而且不易維護。但是近年來,隨著新WEB標準的不斷普及,基于DIV+CSS的新型網(wǎng)頁布局方式開始流行,使用CSS制作的菜單可以非常方便地為網(wǎng)站帶來清晰的導航支持。CSS是CascadingStyleSheets(層疊樣式表)的縮寫,它是一種用來結(jié)構(gòu)化文檔、添加樣式的計算機語言。CSS布局與結(jié)構(gòu)化語言HTML相結(jié)合能幫助設計師將內(nèi)容與表現(xiàn)相分離,只要對相應的CSS代碼做修改,就可以改變頁面的布局和呈現(xiàn)方式,使站點的訪問及維護更加容易。文中在HTML無序列表的結(jié)構(gòu)基礎上基于CSS技術制作了一個兩級下拉菜單。1基于網(wǎng)絡的布局設計1.1運動表示的定義景觀文中下拉菜單的外層結(jié)構(gòu)采用HTML文檔的無序列表,通過<ul>標記和<li>標記來實現(xiàn)。首標記<ul>和尾標記</ul>之間的部分是無序列表的內(nèi)容,<li>和</li>之間是列表項的內(nèi)容。菜單的內(nèi)層結(jié)構(gòu)是在每個li列表項的內(nèi)部采用另外一組HTML標記—dl、dt和dd,這組標記非常適合在設計子菜單中使用。dl稱為“定義列表”,使用方法相當于ul;dt和dd分別稱為“定義標題”和“定義描述”,使用方法相當于li。設計過程是首先定義菜單的HTML結(jié)構(gòu),然后利用CSS設置樣式,最終實現(xiàn)當鼠標經(jīng)過主菜單項時相應的子菜單打開,鼠標離開時子菜單關閉的效果。1.2系數(shù)和平均形式文中用到的核心技術是CSS,它是由W3C定義和維護的一種標準,用來取代基于表格的布局、框架以及其他非標準的表現(xiàn)方法。它與HTML的結(jié)合使用能夠?qū)⒕W(wǎng)頁的內(nèi)容和表現(xiàn)相分離,通過編寫不同的CSS代碼可以使相同的網(wǎng)頁內(nèi)容以不同的頁面布局顯示出來,改版方便,不需要變動頁面內(nèi)容,清晰合理的頁面結(jié)構(gòu)可以提高網(wǎng)站的可用性。CSS的語法很簡單,一個樣式表由一組規(guī)則組成。每個規(guī)則由一個“選擇器”和一個定義部分組成。每個定義部分包含一組由半角分號(;)分離的定義。這組定義放在一對大括號({})之間。每個定義由一個屬性,一個半角冒號(:)和一個值組成。選擇器通常為文檔中的元素,如HTML中的<body>,<p>等標簽,多個選擇器可以用半角逗號(,)隔開。還可以在文檔結(jié)構(gòu)中定義ID選擇器和類選擇器,CSS樣式表中ID選擇器以(#)開頭,類選擇器由(.)開頭,ID選擇器的優(yōu)先級高于類選擇器。屬性用于控制選擇器的樣式。值指屬性接受的設置值,可由各種關鍵字組成,多個關鍵字以空格隔開。CSS樣式可以采用嵌入式、內(nèi)聯(lián)式和外聯(lián)式三種形式來定義,外部樣式表存放于擴展名為.css的文件中,在<head>內(nèi)使用<link>標簽將文件鏈接到HT-ML中,引用方式如下:<linkrel=“stylesheet”href=“menu.css”type=“text/css”/>這條引用語句也可以放在文件的body部位,習慣放在head(頭部)更便于代碼的調(diào)試和查找。這種外聯(lián)引用CSS樣式的方式可以提升工作效率,節(jié)約服務器的帶寬。文中正是采用外部樣式表來定義下拉菜單的CSS樣式。1.3代碼設計1.3.1生成被定義的以l和li標記為重心的菜單項把整個菜單分為三組:各地美食,休閑娛樂和輔導書籍。首先用ul和li標記定義出外層結(jié)構(gòu),然后在每一個li列表項目中定義內(nèi)層結(jié)構(gòu),使用dl定義一個菜單項,一級菜單文字用dt定義,子菜單文字用dd定義。以下列出這三組列表項的HTML代碼。1.3.2像素值密度設計對于菜單ul和li的外層結(jié)構(gòu),首先進行常規(guī)設置,包括列表寬度、內(nèi)外邊距、字體等屬性的設置。在上面所述代碼中,每個列表項li的marginright設置為若干個像素值(此處設置了1像素)可以使得各個菜單項之間有一定的間隔。另外,li列表默認的采用豎直方式排列,為了實現(xiàn)橫向排列效果,便于子菜單項的設計,在li樣式的第一行就把浮動方式(float)屬性的值設置為了left。1.3.3月前后下設圓角t對于菜單每個列表項li之間的內(nèi)層結(jié)構(gòu),以第一組菜單為例設置CSS樣式。首先對dl列表進行如下的常規(guī)設置:其中,padding-bottom設置為10px,用于預留打開子菜單項的空間。其次,分別對主菜單項dt和子菜單項dd設置樣式,常規(guī)設置有以下幾項:除此之外,最為關鍵的技術是以下四種主要效果的實現(xiàn):A.圓角效果。在CSS中,網(wǎng)頁元素的圓角效果是采用插入帶圓角的背景圖片,并設置放置方位的方式來實現(xiàn)的。文中使用了兩張背景圖片分別實現(xiàn)主菜單項上端和子菜單項下端的圓角效果,與背景顏色同時設置。background:#9f9url(bottom.gif)no-repeatbottomleft;/*給每個菜單項增加背景顏色,背景圖片放在最底下,使下端產(chǎn)生圓角效果*/background:#f60url(top.gif)no-repeattopleft;/*顯示主菜單項上方的圓角*/B.主菜單與子菜單的分割效果。在主菜單項下面設置一條暗紅色的邊框作為和子菜單的分割。同樣的,在子菜單項最下面的dd項下端也設置一條邊框,使其與上端的分割線相對應。border-bottom:1pxsolid#b00;/*子菜單項下面的暗紅色邊框*/(1)主菜單項的鏈接文字效果設置。display:block;/*設置為塊狀元素,使得當鼠標經(jīng)過整塊區(qū)域時都能打開子菜單*/color:#fff;/*字體為白色*/text-decoration:none;/*去掉下劃線*/}(2)子菜單項的鏈接文字效果設置。height:1em;text-decoration:none;padding:4px5px4px20px;background:#47aurl(arrow.gif)no-repeat10px10px;/*添加一個小三角形圖像做背景*/}D.鼠標響應效果。(1)設置鼠標沒有經(jīng)過主菜單項區(qū)域時隱藏子菜單的效果。(2)對li使用:hover偽類,以實現(xiàn)當鼠標經(jīng)過時打開子菜單的效果。(3)設置當鼠標經(jīng)過子菜單的某一項時,字體和背景顏色發(fā)生變化,以顯示出區(qū)別。2在網(wǎng)站上創(chuàng)建排序列表并執(zhí)行它至此,整個下拉菜單的HTML結(jié)構(gòu)和CSS樣式就設計完成了,在IE7或Firefox中可顯示出下拉效果。2.1主菜單項的顯示效果在網(wǎng)頁瀏覽者沒有進行鼠標操作的情況下,此下拉菜單的顯示效果如圖1所示,各主菜單項呈水平排列,文字下方有一條邊框作為和子菜單項的分割,此時鼠標沒有經(jīng)過主菜單項區(qū)域,按照前面的鼠標響應設置,子菜單項被隱藏。2.2網(wǎng)格化后的下拉菜單當網(wǎng)頁瀏覽者的鼠標經(jīng)過某一主菜單項區(qū)域時,下拉菜單效果就顯示出來了,如圖2所示,這時相應主菜單dl列表padding-bottom設置的10px預留區(qū)域被打開,子菜單項隨之顯示出來,這10px的區(qū)域就移動到了子菜單最后一項的下方。整個子菜單有深色的背景顏色和淺色的文字,每個菜單項前面的小三角形用于顯示列表效果。當鼠標經(jīng)過某一子菜單項時,其文字和背景顏色都發(fā)生了變化。打開其他子菜單項也是相同的效果。文中基于CSS技術制作出來的下拉菜單樣式美觀,當瀏覽者沒有進行鼠標操作的情況下,網(wǎng)頁上只顯示主菜單項,子菜單項是隱藏的,不會影響整個網(wǎng)頁的顯示效果和瀏覽速度,當瀏覽者需要查看某個菜單的詳細資料時就可以將鼠標移動到該主菜單項區(qū)域,這時子菜單項就會打開,并通過列表形式展現(xiàn)在瀏覽者的眼前,瀏覽者可以根據(jù)需要進入到相應的菜單項查看相關內(nèi)容。這種下拉菜單結(jié)構(gòu)易于實現(xiàn),實用性強,不會占用很大的空間,在網(wǎng)頁設計中可以被廣泛采用。3主觀站區(qū)的下拉菜單文中制作了一個兩級下拉菜單。整體菜單結(jié)構(gòu)的外層使用了HTML的無序列表ul和列表項li,內(nèi)層使用了dl、dt和dd分別對整體菜單項和主、子菜單項進行標記。關鍵技術在于使用CSS分別實現(xiàn)了圓角,鏈接文字和鼠標響應的顯示效果,最終達到當鼠標指針經(jīng)過主菜單項區(qū)域時,子菜單項被打開的效果。對于大多數(shù)的網(wǎng)站而言,兩級的下拉菜單已經(jīng)可以滿足絕大多數(shù)的需要,通過調(diào)整CSS樣式表中的參數(shù)還可以制作出更加精美的導航菜單。/*主菜單項下面的暗紅色邊框*/order-bottom:1pxsolid#b00;}#menulidd.last{C.鏈接文字效果。#menul

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論