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

1、 制作豐富的超鏈接特效制作豐富的超鏈接特效 創(chuàng)建按鈕式超鏈接創(chuàng)建按鈕式超鏈接 制作熒光燈效果的菜單制作熒光燈效果的菜單 控制鼠標指針控制鼠標指針 設置項目列表樣式設置項目列表樣式 創(chuàng)建基于列表的導航菜單創(chuàng)建基于列表的導航菜單 應用滑動門技術的玻璃效果菜單應用滑動門技術的玻璃效果菜單 圖圖16.1 Office網(wǎng)站導航風格與軟件風格一致網(wǎng)站導航風格與軟件風格一致 圖圖16.2 Windows Mobile網(wǎng)站的菜單式導航網(wǎng)站的菜單式導航16.1 16.1 制作豐富的超鏈接特效制作豐富的超鏈接特效 在在HTMLHTML語言中，超鏈接是通過標語言中，超鏈接是通過標記記來實現(xiàn)的，鏈接的具體地址則是來實

2、現(xiàn)的，鏈接的具體地址則是利用利用標記的標記的hrefhref屬性，代碼如下：屬性，代碼如下： 前沿視頻前沿視頻教室教室 atext-decoration:none;atext-decoration:none;/ /* * 去掉下畫線去掉下畫線 * */ / 16.2 16.2 創(chuàng)建按鈕式超鏈接創(chuàng)建按鈕式超鏈接 首先跟所有首先跟所有HTMLHTML頁面一樣，建立最簡單的菜單頁面一樣，建立最簡單的菜單結構，本例使用和上面實例相同的結構，本例使用和上面實例相同的HTMLHTML結構，代結構，代碼如下：碼如下： Home Home East East West West North North Sou

3、th South 按鈕超鏈接按鈕超鏈接 #menuheight:2.5em; #menuheight:2.5em; background-color:#CCC; background-color:#CCC; atext-align:center; atext-align:center; margin:20px; margin:20px; padding:5px 10px; padding:5px 10px; line-height:2.5em; line-height:2.5em; text-decoration: none; text-decoration: none; a:link, a:

4、visitedcolor: #A62020;a:link, a:visitedcolor: #A62020;background-color: #DDD;background-color: #DDD;border-top: 1px solid #EEEEEE;border-top: 1px solid #EEEEEE;/ /* * 邊框實現(xiàn)陰影效果邊框實現(xiàn)陰影效果 * */ /border-left: 1px solid #EEEEEE;border-left: 1px solid #EEEEEE;border-bottom: 1px solid #717171;border-bottom:

5、1px solid #717171;border-right: 1px solid #717171;border-right: 1px solid #717171; a:hovercolor:#821818;a:hovercolor:#821818; / /* * 改變文字顏色改變文字顏色 * */ /background-color:#CCC;background-color:#CCC; / /* * 改變背景色改變背景色 * */ /border-top: 1px solid #717171;border-top: 1px solid #717171; / /* * 邊框變換，實現(xiàn)邊框變換

6、，實現(xiàn)“按下去按下去”的效果的效果 * */ /border-left: 1px solid #717171;border-left: 1px solid #717171;border-bottom: 1px solid #EEEEEE;border-bottom: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE; 圖圖16.8 最終效果最終效果16.3 16.3 制作熒光燈效果的菜單制作熒光燈效果的菜單圖圖16.9 熒光燈效果菜單熒光燈效果菜單16.3.1 16.3.1 創(chuàng)建創(chuàng)

7、建HTMLHTML框架框架 首先，從編寫基本的首先，從編寫基本的HTMLHTML文件開始，搭建出文件開始，搭建出這個菜單的基本框架，這個菜單的基本框架，HTMLHTML代碼如下。代碼如下。 Home Home Contact Us Contact Us Web Dev Web Dev Web Design Web Design Map Map 16.3.2 16.3.2 設置容器的設置容器的CSSCSS樣式樣式 （1 1）現(xiàn)在設置菜單）現(xiàn)在設置菜單divdiv容器的整體區(qū)域容器的整體區(qū)域樣式，設置菜單的寬度、背景色，以及文樣式，設置菜單的寬度、背景色，以及文字的字體和大小。字的字體和大小。 在

8、在HTMLHTML文件的文件的headhead部分增加部分增加CSSCSS樣式表樣式表代碼如下。代碼如下。 #menu #menu font-family:Arial font-family:Arial; ; font-size:14px; font-size:14px; font-weight:bold font-weight:bold; ; width:120px; width:120px; padding:8px; padding:8px; background:#000; background:#000; margin:0 auto; margin:0 auto; border:1px

9、 solid #ccc; border:1px solid #ccc; 16.3.3 16.3.3 設置菜單項的設置菜單項的CSSCSS樣式樣式 （1 1）現(xiàn)在就需要設置文字鏈接了。）現(xiàn)在就需要設置文字鏈接了。 為了使為了使5 5個文字鏈接依次豎直排列，需個文字鏈接依次豎直排列，需要將它們從要將它們從“行內元素行內元素”變?yōu)樽優(yōu)椤皦K級元塊級元素素”。 此外還應該為它們設置背景色和內邊此外還應該為它們設置背景色和內邊距。具體代碼如下：距。具體代碼如下： #menu a, #menu a:visited#menu a, #menu a:visited display:block; display:

10、block; padding:4px 8px; padding:4px 8px; （2 2）接下來設置文字的樣式，取消下）接下來設置文字的樣式，取消下畫線，并將文字設置為灰色，代碼如下：畫線，并將文字設置為灰色，代碼如下： colorcolor:#ccc:#ccc; ; text-decoration:none; text-decoration:none; （3 3）還需要給每個菜單項的上面增加）還需要給每個菜單項的上面增加一個一個“熒光燈熒光燈”，這可以通過設置上邊框，這可以通過設置上邊框來實現(xiàn)，代碼如下：來實現(xiàn)，代碼如下： border-top:8px solid #060;border-

11、top:8px solid #060; 文字鏈接的代碼：文字鏈接的代碼：#menu a, #menu a:visited#menu a, #menu a:visited display:block; display:block; padding:4px 8px; padding:4px 8px; color:#ccc; color:#ccc; text-decoration:none; text-decoration:none; border-top:8px solid #060; border-top:8px solid #060; height:1em; height:1em; 圖圖16.

12、14 在在Firefox瀏覽器中的效果瀏覽器中的效果 鼠標經(jīng)過文字鏈接的代碼：鼠標經(jīng)過文字鏈接的代碼：#menu a:hover #menu a:hover color:#FF0; color:#FF0; border-top:8px solid #0E0; border-top:8px solid #0E0; 圖圖16.14 在在Firefox瀏覽器中的效果瀏覽器中的效果16.4 16.4 控制鼠標指針控制鼠標指針表表16.2 cursor定制的鼠標屬性值及指針效果定制的鼠標屬性值及指針效果16.5 16.5 設置項目列表樣式設置項目列表樣式16.5.1 16.5.1 列表的符號列表的符號

13、通常的項目列表主要采用通常的項目列表主要采用ul 或者或者ol 標記，然后配合標記，然后配合li 標記列出各個項標記列出各個項目。目。 項目列表符號可用如下屬性設置：項目列表符號可用如下屬性設置：list-style-type:list-style-type: 圖圖16.16 普通項目列表普通項目列表 16.5.2 16.5.2 圖片符號圖片符號 除了傳統(tǒng)的各種項目符號外，除了傳統(tǒng)的各種項目符號外，CSSCSS還提還提供了屬性供了屬性list-style-imagelist-style-image，可以將項目，可以將項目符號顯示為任意的圖片，例如有下面一段符號顯示為任意的圖片，例如有下面一段代

14、碼。代碼。 head 項目列表項目列表 ulfont-size:0.9em; ulfont-size:0.9em; color:#00458c; color:#00458c; list-style-image: url(icon1.jpg); list-style-image: url(icon1.jpg); Home Home Contact us Contact us Web Dev Web Dev Web Design Web Design Map Map 在在IEIE 7 7和和FirefoxFirefox中的顯示效果不一樣中的顯示效果不一樣圖圖16.19 圖片符號圖片符號在在IEIE

15、 7 7和和FirefoxFirefox中的顯示效果一樣的做法中的顯示效果一樣的做法 head 項目列表項目列表 ulfont-size:0.9em;color:#00458c; ulfont-size:0.9em;color:#00458c;list-style-type:nonelist-style-type:none; li libackground:url(icon1.jpg) no-repeat;background:url(icon1.jpg) no-repeat; / /* * 添加為背景圖片添加為背景圖片 * */ / padding-left:25pxpadding-left:25px; / /* * 設置圖標與文字的間隔設置圖標與文字的間隔 * */ / Home Home Conta