HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第八章-鏈接與導(dǎo)航

1、第1頁(yè)第8章 鏈接與導(dǎo)航本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述網(wǎng)頁(yè)中鏈接、列表與菜單隨處可見(jiàn)，本章將講解使用CSS設(shè)置鏈接與導(dǎo)航菜單的方法。第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解鏈接的四種狀態(tài)，能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式。掌握文字鏈接樣式的設(shè)置，能夠制作不同區(qū)域的鏈接效果。掌握?qǐng)D像鏈接樣式的設(shè)置。掌握縱向?qū)Ш讲藛卧O(shè)計(jì)，能夠制作網(wǎng)站的產(chǎn)品列表。掌握使用CSS設(shè)置橫向?qū)Ш讲藛蔚某Ｓ梅椒?。?頁(yè)主要內(nèi)容8. 1 鏈接樣式8. 2 縱向?qū)Ш讲藛卧O(shè)計(jì)8. 3 橫向?qū)Ш讲藛卧O(shè)計(jì)8. 4 實(shí)訓(xùn)8. 5 本章小結(jié) 第5頁(yè)8.1 鏈接樣式本節(jié)主要內(nèi)容：案例分析設(shè)置文字鏈接樣式設(shè)置圖像鏈接樣式案例制作第6頁(yè)

2、8.1.1 案例分析【案例展示】使用CSS設(shè)置鏈接樣式的基本知識(shí)制作產(chǎn)品中心產(chǎn)品鏈接局部頁(yè)面?！局R(shí)要點(diǎn)】掌握使用CSS設(shè)置鏈接樣式的常用方法。【學(xué)習(xí)目標(biāo)】超鏈接的4種狀態(tài)及設(shè)置順序。參考代碼：8-1.html8.1.2 設(shè)置文字鏈接樣式偽類(lèi)中通過(guò):link、:Visited、:hover和:active來(lái)控制鏈接內(nèi)容訪(fǎng)問(wèn)前、訪(fǎng)問(wèn)后、鼠標(biāo)懸停時(shí)以及用戶(hù)激活時(shí)的樣式。需要要說(shuō)明的是，這4種狀態(tài)的順序不能顛倒，否則可能會(huì)導(dǎo)致偽類(lèi)樣式不能實(shí)現(xiàn)。參考示例：8-1-1.html ， 8-1-2.html第7頁(yè)第8頁(yè)8.1.3 設(shè)置圖像鏈接樣式網(wǎng)頁(yè)設(shè)計(jì)中對(duì)文字鏈接的修飾不僅限于增加邊框、修改背景顏色等方式

3、，還可以利用背景圖片對(duì)文字鏈接進(jìn)行進(jìn)一步美化。參考示例：8-1-3.html8.1.4 案例制作制作完成演示案例:產(chǎn)品中心頁(yè)面的產(chǎn)品鏈接。參考代碼 8-1.html第9頁(yè)第10頁(yè)8.2 縱向?qū)Ш讲藛卧O(shè)計(jì) 本節(jié)主要內(nèi)容：案例分析縱向?qū)Ш讲藛伟咐谱鞯?1頁(yè)8.2.1 案例分析【案例展示】使用CSS設(shè)置縱向?qū)Ш讲藛蔚幕局R(shí)制作“產(chǎn)品中心”頁(yè)面的左側(cè)導(dǎo)航菜單。【知識(shí)要點(diǎn)】普通的鏈接導(dǎo)航菜單、縱向列表導(dǎo)航菜單?！緦W(xué)習(xí)目標(biāo)】掌握使用CSS設(shè)置縱向?qū)Ш讲藛蔚某Ｓ梅椒▍⒖即a：8-2.html第12頁(yè)8.2.2 縱向?qū)Ш讲藛纹胀ǖ逆溄訉?dǎo)航菜單的制作比較簡(jiǎn)單，主要采用將文字鏈接從“行級(jí)元素”變?yōu)椤皦K級(jí)元素”

4、的方法來(lái)實(shí)現(xiàn)。參考示例：8-2-1.html8.2.3 案例制作制作完成演示案例:產(chǎn)品中心頁(yè)面的左側(cè)導(dǎo)航。參考代碼 8-2.html第13頁(yè)8.3 橫向?qū)Ш讲藛卧O(shè)計(jì)第14頁(yè)本節(jié)主要內(nèi)容：案例分析網(wǎng)站主導(dǎo)航菜單的設(shè)計(jì)案例制作8.3.1 案例分析【案例展示】使用CSS設(shè)置橫向?qū)Ш讲藛蔚幕局R(shí)制作產(chǎn)品列表中頁(yè)碼導(dǎo)航列表?！局R(shí)要點(diǎn)】導(dǎo)航菜單的橫豎轉(zhuǎn)換、橫向列表導(dǎo)航菜單?！緦W(xué)習(xí)目標(biāo)】掌握使用CSS設(shè)置橫向?qū)Ш讲藛蔚某Ｓ梅椒ǖ?5頁(yè)8.3.2 網(wǎng)站主導(dǎo)航菜單的設(shè)計(jì)在保持原有HTML結(jié)構(gòu)不變的情況下，可以將縱向?qū)Ш睫D(zhuǎn)變成橫向?qū)Ш?，其中最重要的環(huán)節(jié)就是設(shè)置標(biāo)簽為浮動(dòng)。參考示例：8-3-1.html第16頁(yè)8.3.3 案例制作制作完成演示案例:產(chǎn)品中心頁(yè)面的頁(yè)碼導(dǎo)航。參考代碼 8-3.html第17頁(yè)8.4 實(shí)訓(xùn)制作完成演示案例:網(wǎng)站產(chǎn)品中心頁(yè)面。參考代碼 8-4.html第18頁(yè)第19頁(yè)8.5 本章小結(jié) 本章全面講述了使用CSS設(shè)置鏈接與導(dǎo)航菜單的方法。首先，介紹了使用CSS設(shè)置文字鏈接樣式、設(shè)置圖像鏈接樣式。接下來(lái)，講解