第16章用CSS設(shè)置鏈接與導(dǎo)航菜單

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

2、現(xiàn)的，鏈接的具體地址則是利用利用標(biāo)記的標(biāo)記的hrefhref屬性，代碼如下：屬性，代碼如下： 前沿視頻前沿視頻教室教室 atext-decoration:none;atext-decoration:none;/ /* * 去掉下畫線去掉下畫線 * */ / 16.2 16.2 創(chuàng)建按鈕式超鏈接創(chuàng)建按鈕式超鏈接 首先跟所有首先跟所有HTMLHTML頁面一樣，建立最簡單的菜單頁面一樣，建立最簡單的菜單結(jié)構(gòu)，本例使用和上面實(shí)例相同的結(jié)構(gòu)，本例使用和上面實(shí)例相同的HTMLHTML結(jié)構(gòu)，代結(jié)構(gòu)，代碼如下：碼如下： 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;/ /* * 邊框?qū)崿F(xiàn)陰影效果邊框?qū)崿F(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; / /* * 邊框變換，實(shí)現(xiàn)邊框變換

6、，實(shí)現(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文件開始，搭建出文件開始，搭建出這個(gè)菜單的基本框架，這個(gè)菜單的基本框架，HTMLHTML代碼如下。代碼如下。 Home Home Contact Us Contact Us Web Dev Web Dev Web Design Web Design Map Map 16.3.2 16.3.2 設(shè)置容器的設(shè)置容器的CSSCSS樣式樣式 （1 1）現(xiàn)在設(shè)置菜單）現(xiàn)在設(shè)置菜單divdiv容器的整體區(qū)域容器的整體區(qū)域樣式，設(shè)置菜單的寬度、背景色，以及文樣式，設(shè)置菜單的寬度、背景色，以及文字的字體和大小。字的字體和大小。 在

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

10、block; padding:4px 8px; padding:4px 8px; （2 2）接下來設(shè)置文字的樣式，取消下）接下來設(shè)置文字的樣式，取消下畫線，并將文字設(shè)置為灰色，代碼如下：畫線，并將文字設(shè)置為灰色，代碼如下： colorcolor:#ccc:#ccc; ; text-decoration:none; text-decoration:none; （3 3）還需要給每個(gè)菜單項(xiàng)的上面增加）還需要給每個(gè)菜單項(xiàng)的上面增加一個(gè)一個(gè)“熒光燈熒光燈”，這可以通過設(shè)置上邊框，這可以通過設(shè)置上邊框來實(shí)現(xiàn)，代碼如下：來實(shí)現(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瀏覽器中的效果瀏覽器中的效果 鼠標(biāo)經(jīng)過文字鏈接的代碼：鼠標(biāo)經(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 控制鼠標(biāo)指針控制鼠標(biāo)指針表表16.2 cursor定制的鼠標(biāo)屬性值及指針效果定制的鼠標(biāo)屬性值及指針效果16.5 16.5 設(shè)置項(xiàng)目列表樣式設(shè)置項(xiàng)目列表樣式16.5.1 16.5.1 列表的符號列表的符號

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

14、碼。代碼。 head 項(xiàng)目列表項(xiàng)目列表 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 項(xiàng)目列表項(xiàng)目列表 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; / /* * 設(shè)置圖標(biāo)與文字的間隔設(shè)置圖標(biāo)與文字的間隔 * */ / Home Home Conta