Css制作導(dǎo)航菜單_第1頁(yè)
Css制作導(dǎo)航菜單_第2頁(yè)
Css制作導(dǎo)航菜單_第3頁(yè)
Css制作導(dǎo)航菜單_第4頁(yè)
Css制作導(dǎo)航菜單_第5頁(yè)
已閱讀5頁(yè)，還剩3頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Css制作導(dǎo)航菜單除非你的網(wǎng)站只有一頁(yè)，不然你一定會(huì)用的導(dǎo)航的.事實(shí)上，導(dǎo)航在網(wǎng)頁(yè)設(shè)計(jì)中是最重要部分之一.你要用很多時(shí)間去考慮如何讓瀏覽者更容易訪問(wèn)你的網(wǎng)站.在以前做網(wǎng)站導(dǎo)航時(shí)，往往依賴于圖像，表格，和javascript.而這些都嚴(yán)重的影響了網(wǎng)站的可訪問(wèn)性和可使用性.如果在一個(gè)缺乏支持javascript的用戶，那么你的網(wǎng)站導(dǎo)航將無(wú)算正常的顯示.比如說(shuō)一個(gè)用戶把瀏覽器的javascript關(guān)閉掉，或者在一個(gè)只能讀純文字的手持設(shè)備--它們將無(wú)算從你的網(wǎng)站讀到所有的數(shù)據(jù).如果你的委拖人不注重這方面,那么告訴他繁雜的菜單會(huì)阻止搜索引擎的排名.（木木:像禪意花園就是一個(gè)不錯(cuò)的CSS網(wǎng)站.）使用CSS可以創(chuàng)建一個(gè)更有吸引力的導(dǎo)航，因?yàn)镃SS沒有和文本混合在一起，所以確保了導(dǎo)航的可訪問(wèn)性和使那些手持設(shè)備也可以讀出.在這個(gè)教程里我們將看到一個(gè)基于CSS的導(dǎo)航.基于CSS的網(wǎng)站會(huì)加快網(wǎng)頁(yè)加載的時(shí)間,這樣基于圖像的導(dǎo)航將漸漸的被淘汰掉.導(dǎo)航的結(jié)構(gòu)先看效果圖：RecipesStarters知MainCoursesDessertsContactUsArticlesBuyO導(dǎo)航的本質(zhì)是讓瀏覽者更好的訪問(wèn)你的網(wǎng)站，所以要建立有意義的語(yǔ)義.使CSS和語(yǔ)義相符合，為了以后方便維護(hù).注意要避免現(xiàn)有瀏覽器的不兼容.解決方案下面是導(dǎo)航的HTML和CSS的代碼，效果如圖.RecipesContactU&ArticlesBuyOnline這是創(chuàng)建導(dǎo)航的HTML代碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="/1999/xhtml"lang="en-US"><head><title>Listsasnavigation</title><metahttp-equiv="content-type"c/><linkrel="stylesheet"type="text/css"href="listnav1.css"/></head><body><divid="navigation"><ul><li><ahref="#">Recipes</a></li><li><ahref="#">ContactUs</a></li><li><ahref="#">Articles</a></li><li><ahref="#">BuyOnline</a></li></ul></div></body></html>使用CSS給上面代碼添加效果#navigation{width:200px;}#navigationul{list-style:none;margin:0;padding:0;}#navigationli{border-bottom:1pxsolid#ED9F9F;}#navigationlia:link,#navigationlia:visited{font-size:90%;display:block;padding:0.4em00.4em0.5em;border-left:12pxsolid#711515;border-right:1pxsolid#711515;background-color:#B51032;color:#FFFFFF;text-decoration:none;}分析：先創(chuàng)建一個(gè)無(wú)序列表的導(dǎo)航條，并做好導(dǎo)航鏈接.<ul><li><ahref="#">Recipes</a></li><li><ahref="#">ContactUs</a></li><li><ahref="#">Articles</a></li><li><ahref="#">BuyOnline</a></li></ul>然后用一個(gè)div把這個(gè)無(wú)序列表包含起來(lái).<divid="navigation"><ul><li><ahref="#">Recipes</a></li><li><ahref="#">ContactUs</a></li><li><ahref="#">Articles</a></li><li><ahref="#">BuyOnline</a></li></ul></div>在瀏覽器中顯示默認(rèn)的樣式.R—ims.GonlaclUsArticasBuyOnline接下來(lái)我們要做的第一件事是給這個(gè)div定義寬度.#navigation{width:200px;}給列表添加樣式，去掉默認(rèn)的圓點(diǎn)和清除填充.#navigationul{list-style:none;margin:0;padding:0;}在瀏覽器中顯示：RecipesContactUsArticlesBuyOnline給li標(biāo)簽添加一個(gè)下劃線#navigationli{border-bottom:1pxsolid#ED9F9F;}給鏈接添加樣式:#navigationlia:link,#navigationlia:visited{font-size:90%;display:block;padding:0.4em00.4em0.5em;border-left:12pxsolid#711515;border-right:1pxsolid#711515;background-color:#B51032;color:#FFFFFF;text-decoration:none;}在上面可以看到這個(gè)CSS是添加了左右邊框，并且使對(duì)象塊狀,這樣做的效果使鏈接看起來(lái)像一個(gè)按扭.這種效果看起來(lái)像是給導(dǎo)航添加一個(gè)圖片似的.使用CSS創(chuàng)建一個(gè)沒有圖像和javascript的導(dǎo)航.導(dǎo)航功能常常具有翻轉(zhuǎn)的效果：比如說(shuō)一個(gè)瀏覽者把鼠標(biāo)放在按扭上，按扭就會(huì)顯示出另一張圖片，來(lái)突出效果.要實(shí)現(xiàn)這個(gè)效果，則要兩張圖像和javascript.解決方案：使用CSS來(lái)創(chuàng)建上面的那個(gè)效果比用圖像來(lái)創(chuàng)建要簡(jiǎn)單的多.在CSS要現(xiàn)實(shí)翻轉(zhuǎn)這個(gè)效果用到hover偽類選擇器.我們給上面的事例加個(gè)翻轉(zhuǎn)的效果：#navigationlia:hover{background-color:#711515;color:#FFFFFF;效果如圖:RecipesContactUsArticlesBuyOnline我們可以看到使用CSS來(lái)實(shí)現(xiàn)這個(gè)效果是非常簡(jiǎn)單的.在這個(gè)例子里我只是改下翻轉(zhuǎn)的背景的顏色.你可以在翻轉(zhuǎn)時(shí)改變邊框，和文字的顏色.在現(xiàn)代的瀏覽器中,比如說(shuō)IE7,你可以給任何對(duì)象添加:hover偽類選擇器.但是在IE6以下版本卻不能這樣使用.在老式的版本中只充許錨文本可以點(diǎn)擊，因此用戶只能點(diǎn)擊到文字，而不是背景.我們?nèi)绾谓鉀Q這個(gè)問(wèn)題，這里有一個(gè)黑客的方法:擴(kuò)大鏈接的寬度.*html#navigationlia{width:100%;}如何使用CSS創(chuàng)建一個(gè)副導(dǎo)航到目前為止例子所建的是一個(gè)水平的導(dǎo)航，但有時(shí)我們需要在水平下添加一個(gè)副導(dǎo)航.我們給例子再增加嵌套并添加其CSS樣式.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="/1999/xhtml"lang="en-US"><head><title>Listsasnavigation</title><metahttp-equiv="content-type"c/><linkrel="stylesheet"type="text/css"href="listnav_sub.css"/></head><body><divid="navigation"><ul><li><ahref="#">Recipes</a><ul><li><ahref="#">Starters</a></li><li><ahref="#">MainCourses</a></li><li><ahref="#">Desserts</a></li></ul></li><li><ahref="#">ContactUs</a></li><li><ahref="#">Articles</a></li><li><ahref="#">BuyOnline</a></li></ul></div></body></html>#navigation{width:200px;}#navigationul{list-style:none;margin:0;padding:0;}#navigationli{border-bottom:1pxsolid#ED9F9F;}#navigationlia:link,#navigationlia:visited{font-size:90%;display:block;padding:0.4em00.4em0.5em;border-left:12pxsolid#711515;border-right:1pxsolid#711515;background-color:#B51032;color:#FFFFFF;text-decoration:none;}#navigationlia:hover{background-color:#711515;color:#FFFFFF;}#navigationulul{margin-left:12px;}#navigationululli{border-bottom:1pxsolid#711515;margin:0;}#navigationulula:link,#navigationulula:visited{background-color:#ED9F9F;color:#711515;}#navigationulula:hover{background-color:#711515;color:#FFFFFF;}效果如圖:RecipesStarters必MainCoursesDessertsContactUsArticlesBuyO分析：嵌套列表是一個(gè)很好的方式來(lái)描述導(dǎo)航系統(tǒng).在這個(gè)例子我們用了第一個(gè)列表來(lái)表示主菜單,而子菜單則包含在主菜單的下面.這樣如沒有CSS樣式，結(jié)構(gòu)也是非常的清晰.R—ig-MainCourses口D-ss白rts■ContactUsArticles.BuyOnlinv在主菜單<li>對(duì)象包含一個(gè)列表:<divid="navigation"><ul><li><ahref="#">Recipes</a><ul><li><ahref="#">Starters</a></li><li><ahref="#">MainCourses</a></li><li><ahref="#">Desserts</a></li></ul></li><li><ahref="#">ContactUs</a></li><li><ahref="#">Articles</a></li><li><ahref="#">BuyOnline</a></li></ul></div>在html中如果沒有添加CSS的話，那么嵌套列表將繼續(xù)主菜單的CSS樣式，靠左邊浮動(dòng)，所以要添加個(gè)空白，與主菜單有一定的距離.#navigationulul{margin-lef

溫馨提示

  • 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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論