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

1、網(wǎng)頁設(shè)計與制作教程（HTML+CSS+JavaScript）,機械工業(yè)出版社同名教材 配套電子教案,7.1 用CSS設(shè)置鏈接 7.2 用CSS設(shè)置列表 7.3 創(chuàng)建導(dǎo)航菜單 7.4 用CSS設(shè)置鏈接與導(dǎo)航菜單綜合案例,第7章 用CSS設(shè)置鏈接與導(dǎo)航菜單,7.1.1 超鏈接偽類 超鏈接涉及到一個新的概念偽類。首先了解一下超鏈接的4種樣式： a:link color: #ff0000/* 未訪問的鏈接 */ a:visited color: #00ff00/* 已訪問的鏈接 */ a:hover color: #ff00ff/* 鼠標(biāo)懸停到鏈接上 */ a:active color: #0000f

2、f/* 激活的鏈接 */ 超鏈接偽類的語法如下： a : link sRules 設(shè)置a對象在未被訪問前的樣式表屬性。 a : visited sRules 設(shè)置a對象在鏈接地址已被訪問過時的樣式表屬性。 a : hover sRules 設(shè)置a對象在鼠標(biāo)懸停時的樣式表屬性。 a : active sRules 設(shè)置a對象在被用戶激活（按下鼠標(biāo)未松手）時的樣式表屬性。,7.1 用CSS設(shè)置鏈接,7.1.2 改變文字鏈接的外觀 為了更清楚地理解如何使用CSS設(shè)置文字鏈接的外觀，下面講解一個簡單的示例。 【演練7-1】改變文字鏈接的外觀，鼠標(biāo)未懸停時文字鏈接的效果如圖7-1（a）所示，鼠標(biāo)懸停在文

3、字鏈接上時的效果如圖7-1（b）所示。,7.1 用CSS設(shè)置鏈接,7.1.2 改變文字鏈接的外觀 【演練7-2】制作網(wǎng)頁中不同區(qū)域的鏈接效果，鼠標(biāo)經(jīng)過導(dǎo)航區(qū)域的鏈接風(fēng)格與鼠標(biāo)經(jīng)過和我聯(lián)系文字的鏈接風(fēng)格截然不同，本例文件7-2.html在瀏覽器中顯示的效果如圖7-2所示。,7.1 用CSS設(shè)置鏈接,7.1.2 創(chuàng)建按鈕式超鏈接 按鈕式超鏈接的實質(zhì)就是將超鏈接樣式的4個邊框的顏色分別進(jìn)行設(shè)置，左和上設(shè)置為加亮效果，右和下設(shè)置為陰影效果，當(dāng)鼠標(biāo)懸停到按鈕上時，加亮效果與陰影效果剛好相反。 【演練7-3】創(chuàng)建按鈕式超鏈接，當(dāng)鼠標(biāo)懸停到按鈕上時，可以看到超鏈接類似按鈕“被按下”的效果，如圖7-3所示。,

4、7.1 用CSS設(shè)置鏈接,7.1.3 圖文鏈接 網(wǎng)頁設(shè)計中對文字鏈接的修飾不僅限于增加邊框、修改背景顏色等方式，還可以利用背景圖片將文字鏈接進(jìn)一步的美化。 【演練7-4】圖文鏈接，鼠標(biāo)未懸停時文字鏈接的效果如圖7-4（a）所示，鼠標(biāo)懸停在文字鏈接上時的效果如圖7-4（b）所示。,7.1 用CSS設(shè)置鏈接,7.2.1 設(shè)置列表類型 通常的項目列表主要采用或標(biāo)簽，然后配合標(biāo)簽羅列各個項目。在CSS樣式中，列表項的標(biāo)志類型是通過屬性list-style-type來修改的，無論是標(biāo)記還是標(biāo)記，都可以使用相同的屬性值，而且效果是完全相同的。 【演練7-5】設(shè)置列表類型，本例頁面7-5.html的顯示效果

5、如圖7-7所示。,7.2 用CSS設(shè)置列表,7.2.2 設(shè)置列表項圖像 list-style-image屬性主要使用圖像來替換列表項的標(biāo)記，當(dāng)list-style-image屬性的屬性值為none或者設(shè)置的圖片路徑出錯時，list-style-type屬性會替代list-style-image屬性對列表產(chǎn)生作用。 【演練7-7】設(shè)置列表項圖像，本例頁面7-7.html的顯示效果如圖7-11所示。,7.2 用CSS設(shè)置列表,7.2.4 圖文信息列表 網(wǎng)頁中經(jīng)?？梢钥吹綀D文信息列表，如圖7-13所示。之所以稱為圖文信息列表，是因為列表的內(nèi)容是以圖片和簡短語言的形式呈現(xiàn)在頁面中。 【演練7-9】使用

6、圖文信息列表制作電腦商城熱銷筆記本頁面局部信息，本例頁面7-9.html的顯示效果如圖7-14所示。,7.2 用CSS設(shè)置列表,7.3.1 普通的超鏈接導(dǎo)航菜單 普通的超鏈接導(dǎo)航菜單的制作比較簡單，主要采用將文字鏈接從“內(nèi)聯(lián)元素”變?yōu)椤皦K級元素”的方法來實現(xiàn)。 【演練7-10】制作熒光燈效果的菜單，鼠標(biāo)未懸停在菜單項上時的效果如圖7-18（a）所示，鼠標(biāo)懸停在菜單項上時效果如圖7-18（b）所示。,7.3 創(chuàng)建導(dǎo)航菜單,7.3.2 縱向列表模式的導(dǎo)航菜單 由于縱向?qū)Ш讲藛蔚膬?nèi)容并沒有邏輯上的先后順序，因此可以使用無序列表制作縱向?qū)Ш讲藛巍?【演練7-11】制作縱向列表模式的導(dǎo)航菜單，鼠標(biāo)未懸停

7、在菜單項上效果如圖7-22（a）所示，鼠標(biāo)懸停在菜單項上效果如圖7-22（b）所示。,7.3 創(chuàng)建導(dǎo)航菜單,7.3.3 橫向列表模式的導(dǎo)航菜單 在設(shè)計人員制作網(wǎng)頁時，經(jīng)常要求導(dǎo)航菜單能夠在水平方向上顯示。通過CSS屬性的控制，可以實現(xiàn)列表模式導(dǎo)航菜單的橫豎轉(zhuǎn)換。 【演練7-12】制作橫向列表模式的導(dǎo)航菜單，鼠標(biāo)未懸停在菜單項上效果如圖7-25（a）所示，鼠標(biāo)懸停在菜單項上效果如圖7-25（b）所示。,7.3 創(chuàng)建導(dǎo)航菜單,7.4.1 頁面布局規(guī)劃 通過成熟的構(gòu)思與設(shè)計，電腦社區(qū)環(huán)保天地頁面的效果如圖7-28所示，頁面布局示意圖如圖7-29所示。,7.4 用CSS設(shè)置鏈接與導(dǎo)航菜單綜合案例,7.4.2 頁面的制作過程 1前期準(zhǔn)備 （1）欄目目錄結(jié)構(gòu) 在欄目文件夾下創(chuàng)建文件夾images和style，分別用來存放圖像素材和外部樣式表文件。 （2）頁面素材 將本頁面需要使用的圖像素材存放在文件夾images下。 （3）外部樣式表 在文件夾style下新建一個名為style.css的樣式表文件。,7.4 用CSS設(shè)置鏈接與導(dǎo)航菜單綜合案例,7.4.2 頁面的制作過程 2制作頁面 （1）頁面整體的制作 （2）頁面頂部的制作 （3）頁面導(dǎo)航的制作 （4）頁面中部的制作 （5）頁面底部的制作 （6）頁面結(jié)構(gòu)代碼,7.4 用CSS設(shè)置鏈接與導(dǎo)航菜單綜合