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

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

基于css技術(shù)的下拉菜單制作

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論