《CSS網頁設計》課件-第7章用CSS設置超鏈接與導航菜單_第1頁
《CSS網頁設計》課件-第7章用CSS設置超鏈接與導航菜單_第2頁
《CSS網頁設計》課件-第7章用CSS設置超鏈接與導航菜單_第3頁
《CSS網頁設計》課件-第7章用CSS設置超鏈接與導航菜單_第4頁
《CSS網頁設計》課件-第7章用CSS設置超鏈接與導航菜單_第5頁
已閱讀5頁，還剩58頁未讀， 繼續免費閱讀

VIP免費下載

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

文檔簡介

第7章用CSS設置超鏈接與導航菜單

制作豐富的超鏈接特效7.1創建按鈕式超鏈接7.2制作熒光燈效果的菜單7.3控制鼠標指針7.4

設置項目列表樣式7.5創建基于列表的導航菜單7.6應用滑動門技術的玻璃效果菜單7.7

在一個網站中，所有頁面都會通過超鏈接相互鏈接在一起，這樣才會形成一個有機的網站。因此在各種網站中，導航都是網頁中最重要的組成部分之一。

因此，也出現了很多各式各樣非常美觀、實用性很強的導航樣式，如圖7.1所示的是Microsoft公司關于Office的網站，上部的導航條和Office2007軟件風格非常一致。

圖7.1Office網站導航風格與軟件風格一致

圖7.2所示的是MicrosoftWindowsMobile，它的導航使用的是菜單方式。對于一些內容非常多的大型網站，導航就顯得更重要。

圖7.2WindowsMobile網站的菜單式導航7.1制作豐富的超鏈接特效

在HTML語言中，超鏈接是通過標記<a>來實現的，鏈接的具體地址則是利用<a>標記的href屬性，代碼如下：

<ahref="">前沿視頻教室</a>

a{ /*超鏈接的樣式*/text-decoration:none; /*去掉下畫線*/}7.2創建按鈕式超鏈接

首先跟所有HTML頁面一樣，建立最簡單的菜單結構，本例使用和上面實例相同的HTML結構，代碼如下：

<body><ahref="home.htm">Home</a><ahref="east.htm">East</a><ahref="west.htm">West</a><ahref="north.htm">North</a><ahref="south.htm">South</a></body>

<style>a{ display:block;/*設置為塊級元素*/font-family:Arial;/*統一設置所有樣式*/font-size:.8em;text-align:center;margin:3px;}

a:link,a:visited{ /*超鏈接正常狀態、被訪問過的樣式*/

color:#A62020;padding:4px10px4px10px;background-color:#DDD;text-decoration:none;border-top:1pxsolid#EEEEEE; /*邊框實現陰影效果*/

border-left:1pxsolid#EEEEEE;border-bottom:1pxsolid#717171;border-right:1pxsolid#717171;}

a:hover{ /*鼠標經過時的超鏈接*/color:#821818;`/*改變文字顏色*/padding:5px8px3px12px; /*改變文字位置*/background-color:#CCC; /*改變背景色*/

border-top:1pxsolid#717171; /*邊框變換，實現“按下去”的效果*/border-left:1pxsolid#717171;border-bottom:1pxsolid#EEEEEE;border-right:1pxsolid#EEEEEE;}</style>

圖7.8最終效果7.3制作熒光燈效果的菜單

圖7.9熒光燈效果菜單7.3.1創建HTML框架

首先，從編寫基本的HTML文件開始，搭建出這個菜單的基本框架，HTML代碼如下。

<body><divid="menu"><ahref="#">Home</a><ahref="#">ContactUs</a><ahref="#">WebDev</a><ahref="#">WebDesign</a><ahref="#">Map</a>

</div> </body> </html>7.3.2設置容器的CSS樣式

（1）現在設置菜單div容器的整體區域樣式，設置菜單的寬度、背景色，以及文字的字體和大小。在HTML文件的head部分增加CSS樣式表代碼如下。

<styletype="text/css"> #menu{ font-family:Arial; font-size:14px; font-weight:bold; width:120px;

padding:8px;background:#000;margin:0auto;border:1pxsolid#ccc;}</style>7.3.3設置菜單項的CSS樣式

（1）現在就需要設置文字鏈接了。為了使5個文字鏈接依次豎直排列，需要將它們從“行內元素”變為“塊級元素”。此外還應該為它們設置背景色和內邊距，以使菜單文字之間不要過于局促。

具體代碼如下：

#menua,#menua:visiteddisplay:block;padding:4px8px;}

效果如圖7.13所示，斜線部分就是padding屬性設置的內邊距。

圖7.13內邊距示意圖

（2）接下來設置文字的樣式，取消下畫線，并將文字設置為灰色，代碼如下：

color:#ccc;text-decoration:none;

（3）還需要給每個菜單項的上面增加一個“熒光燈”，這可以通過設置上邊框來實現，代碼如下：

border-top:8pxsolid#060;

效果如圖7.14所示。

圖7.14在Firefox瀏覽器中的效果7.4控制鼠標指針

表7.2 cursor定制的鼠標屬性值及指針效果7.5設置項目列表樣式

7.5.1列表的符號通常的項目列表主要采用<ul>或者<ol>標記，然后配合<li>標記列出各個項目，簡單的列表代碼如下，其效果如圖7.16所示。

圖7.16普通項目列表

對應的實例文件為“07-04.html”。

<html><head><title>項目列表</title><style>ul{

font-size:0.9em;color:#00458c;list-style-type:decimal;/*項目編號*/}

</style></head><body><ul>

<li>Home</li><li>Contactus</li><li>WebDev</li><li>WebDesign</li><li>Map</li></ul></body></html>

圖7.17項目編號7.5.2圖片符號

除了傳統的各種項目符號外，CSS還提供了屬性list-style-image，可以將項目符號顯示為任意的圖片，例如有下面一段代碼。

<html><head><title>項目列表</title><style>ul{

font-size:0.9em;color:#00458c;list-style-image:url(icon1.jpg); /*項目符號*/}

</style></head><body><ul>

<li>Home</li><li>Contactus</li><li>WebDev</li><li>WebDesign</li><li>Map</li></ul></body></html>

在IE

7和Firefox中的顯示效果如圖7.19所示，每個項目的符號都顯示成了一個小圖標，即icon1.jpg。

圖7.19圖片符號

相應實例文件為“07-05.html”。

<html><head><title>項目列表</title><style>ul{

font-size:0.9em;color:#00458c;list-style-type:none; /*不顯示項目符號*/}li{

background:url(icon1.jpg)no-repeat; /*添加為背景圖片*/padding-left:25px; /*設置圖標與文字的間隔*/}

</style></head><body><ul>

<li>Home</li><li>Contactus</li><li>WebDev</li><li>WebDesign</li><li>Map</li></ul></body></html>

圖7.20圖片符號7.6創建基于列表的導航菜單

圖7.21無需表格的菜單

圖7.22項目列表7.6.2橫豎自由轉換菜單

圖7.26水平菜單

（a）（b）圖7.27水平菜單可以自由地轉換為豎直菜單和折行菜單7.7應用滑動門技術的玻璃效果菜單

下面來制作一個難度較前面稍大的實例，加深對CSS的原理

溫馨提示

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

評論

0/150

提交評論