《網(wǎng)頁設(shè)計與制作》課件-第六章 應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單

第六章應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單作業(yè)與回顧如何讓HTML元素自動居中?如何讓無序列表橫向排列?使用float屬性后,有一件事不能忘記,是什么?作業(yè)點(diǎn)評點(diǎn)評作業(yè)的提交情況和共性問題預(yù)習(xí)檢查如何將鏈接轉(zhuǎn)換為塊級元素?導(dǎo)航菜單使用的是什么標(biāo)簽實(shí)現(xiàn)的？應(yīng)用課程目標(biāo)

超鏈接的應(yīng)用

設(shè)置導(dǎo)航菜單本章任務(wù)超鏈接的偽類樣式超鏈接：

重點(diǎn)：:link、:visited是a標(biāo)簽獨(dú)有的偽類，:hover和:active是所有標(biāo)簽都能設(shè)置。 4種狀態(tài)的順序一定不能顛倒，否則有些不會生效。偽類標(biāo)簽標(biāo)簽類型常用屬性屬性值a:link未訪問的鏈接color：添加顏色text-decoration：添加文本修飾顏色屬性值為顏色的英文單詞或十六位顏色代碼a:visited已訪問鏈接none:默認(rèn)顯示，沒有任何樣式a:hover鼠標(biāo)移動到鏈接上(懸浮)underline：定義文本下的一條線line-through:定義文本中間的一條線a:active鼠標(biāo)激活鏈接(點(diǎn)擊)超鏈接偽類的應(yīng)用超鏈接的4種樣式將超鏈接轉(zhuǎn)換為塊級元素用css制作按鈕首字下沉小練習(xí)實(shí)現(xiàn)如下圖的效果：將鏈接轉(zhuǎn)換為塊級元素并制作按鈕display:block;(內(nèi)聯(lián)樣式轉(zhuǎn)換為塊級元素)超鏈接偽類的應(yīng)用超鏈接的4種樣式將超鏈接轉(zhuǎn)換為塊級元素用css制作按鈕首字下沉常用屬性描述常用屬性值display將鏈接轉(zhuǎn)換為塊級元素blockwidth定義塊級元素的寬度以像素值或百分比進(jìn)行設(shè)置height定義塊級元素的高度以像素值或百分比進(jìn)行設(shè)置line-height定義塊級元素的行高normal;實(shí)數(shù)；長度；百分比；重點(diǎn)：不能使用負(fù)值text-align定義鏈接上的文本對齊方式left;right;center;background添加背景顏色或圖片顏色的英文單詞或十六位顏色編碼添加邊框樣式添加偽類樣式border:1pxsolidblack:hover小練習(xí)使用a標(biāo)簽實(shí)現(xiàn)按鈕效果：hover后練習(xí)首字下沉新增偽元素：::first-letter只通過為首字設(shè)置樣式實(shí)現(xiàn)首字下沉超鏈接偽類的應(yīng)用超鏈接的4種樣式將超鏈接轉(zhuǎn)換為塊級元素用css制作按鈕首字下沉設(shè)置導(dǎo)航菜單設(shè)置導(dǎo)航菜單橫向列表菜單用圖片美化的橫向?qū)Ш紺SSSprites技術(shù)二級菜單列表ulolli課堂練習(xí)實(shí)現(xiàn)如下圖的效果：橫向列表菜單課堂練習(xí)實(shí)現(xiàn)如下圖的效果：二級菜單列表通過二級菜單把一級菜單分成幾個部分分別導(dǎo)航二級菜單列表的實(shí)現(xiàn)課堂練習(xí)CSSSprites技術(shù)

CSSSprites:又稱為

CSS精靈或者CSS雪碧

它把網(wǎng)頁中的一些背景圖片整合到一張圖片文件中，再利用CSS背景圖片定位到要顯示的位置。這樣做可以減少文件體積，減少對服務(wù)器的請求次數(shù)，提高效率。/

CSS精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）。然而，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進(jìn)行背景定位，其中最關(guān)鍵的是使用background-position屬性精確地定位。使用精靈圖課堂練習(xí)使用精靈圖做出以下效果單元