語(yǔ)法回顧3、了解鼠標(biāo)指針樣式4、按鈕式超鏈接及熒光燈效果菜單5、使用項(xiàng)目列表創(chuàng)建導(dǎo)航菜單6、掌握?qǐng)D片翻轉(zhuǎn)效果7、鼠標(biāo)指針經(jīng)過(guò)時(shí)給圖片增加邊框新課引入在一個(gè)網(wǎng)站中，所有">
使用CSS設(shè)置鏈接與導(dǎo)航菜單

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

ID：39221081

大?。?75.00 KB

頁(yè)數(shù)：22頁(yè)

時(shí)間：2019-06-27

使用CSS設(shè)置鏈接與導(dǎo)航菜單_第1頁(yè)
使用CSS設(shè)置鏈接與導(dǎo)航菜單_第2頁(yè)
使用CSS設(shè)置鏈接與導(dǎo)航菜單_第3頁(yè)
使用CSS設(shè)置鏈接與導(dǎo)航菜單_第4頁(yè)
使用CSS設(shè)置鏈接與導(dǎo)航菜單_第5頁(yè)
資源描述：

《使用CSS設(shè)置鏈接與導(dǎo)航菜單》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第十三講使用CSS設(shè)置鏈接與導(dǎo)航菜單本講目標(biāo)1、精品導(dǎo)航欣賞2、標(biāo)簽語(yǔ)法回顧3、了解鼠標(biāo)指針樣式4、按鈕式超鏈接及熒光燈效果菜單5、使用項(xiàng)目列表創(chuàng)建導(dǎo)航菜單6、掌握?qǐng)D片翻轉(zhuǎn)效果7、鼠標(biāo)指針經(jīng)過(guò)時(shí)給圖片增加邊框新課引入在一個(gè)網(wǎng)站中，所有頁(yè)面都會(huì)通過(guò)超鏈接相互鏈接在一起，這樣才會(huì)形成一個(gè)有機(jī)的整體。在各種網(wǎng)站中，導(dǎo)航都是網(wǎng)頁(yè)中最重要的組成部分之一。1、精品導(dǎo)航欣賞著名網(wǎng)站首頁(yè)導(dǎo)航欣賞1、淘寶網(wǎng)首頁(yè)www.taobao.com2、淘寶網(wǎng)天貓商城”愛(ài)貼墻貼”店鋪首頁(yè)http://itie.tmall.com/shop/view

2、_shop.htm3、蘋果-Apple官網(wǎng)首頁(yè)http://www.apple.com.cn/4、門戶類型網(wǎng)站首頁(yè)騰訊、新浪、網(wǎng)易、搜狐5、QQ空間2、標(biāo)簽語(yǔ)法回顧標(biāo)簽語(yǔ)法回顧鏈接到其他頁(yè)面[免費(fèi)注冊(cè)][登錄](méi)鏈接內(nèi)容鏈接的地址標(biāo)簽還具有什么其他屬性？分別起什么作用呢？

3、>標(biāo)簽常用CSS屬性/*CSSDocument*/a{color:blue;text-decoration:none;/*去除下劃線*/}a:hover{color:red;text-decoration:underline;/*設(shè)置下劃線*/}這種寫(xiě)法稱為：偽類標(biāo)簽“href”屬性路徑設(shè)置1、相對(duì)路徑，一般用于站點(diǎn)內(nèi)部網(wǎng)頁(yè)之間相互鏈接；2、絕對(duì)路徑，一般用于A站點(diǎn)鏈接B站點(diǎn)；兩種方式：相對(duì)路徑和絕對(duì)路徑3、控制鼠標(biāo)指針cursor定制的鼠標(biāo)屬性值及指針效果4、按鈕式超鏈接和熒光燈效果菜單按鈕式超鏈接

4、ref="home.htm">HomeEastWestNorthSouth代碼演示1代碼演示2熒光燈效果的菜單參考課本P253~P256,進(jìn)行分析設(shè)計(jì)代碼演示5、使用項(xiàng)目列表創(chuàng)建導(dǎo)航菜單項(xiàng)目列表回顧

  • Home
  • Contactus
    • WebDev

    5、

  • WebDesign
  • Map
可以是ul…li的組合，也可以是ol…li的組合，區(qū)別就在于list-style-type這個(gè)屬性值的不同！代碼演示使用CSS修飾項(xiàng)目符號(hào)ul{list-style-type:none;}通常情況下,我們不需要項(xiàng)目符號(hào)：其實(shí)，除了list-style-type這個(gè)屬性外，CSS還提供了屬性list-style-image，那么效果到底好不好用呢？發(fā)現(xiàn)并不好用，因此不推薦這種設(shè)置圖片符號(hào)的方法，而是采取對(duì)li設(shè)置背景圖片的方式來(lái)實(shí)現(xiàn)代碼演示利用項(xiàng)目列表創(chuàng)建導(dǎo)

6、航菜單參考課本P261-P264，效果如下：橫向?qū)Ш讲藛呜Q向?qū)Ш讲藛未a演示代碼演示6、其他超鏈接案例圖片翻轉(zhuǎn)效果圖片翻轉(zhuǎn)效果，我們參考apple公司官網(wǎng)導(dǎo)航菜單http://www.apple.com.cn/實(shí)現(xiàn)思路：1、將標(biāo)記變?yōu)閴K級(jí)元素，設(shè)定它的高度和寬度與圖片相同。2、當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，背景圖片換掉，文字顏色改變。案例演示鼠標(biāo)指針經(jīng)過(guò)時(shí)給圖片增加邊框圖片增加邊框效果，我們參考淘寶網(wǎng)首頁(yè)“所有類目”案例演示千里之行始于足下22

當(dāng)前文檔最多預(yù)覽五頁(yè)，下載文檔查看全文
溫馨提示：
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件，查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常，文件下載后無(wú)此問(wèn)題，請(qǐng)放心下載。
2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容，確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載，若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤，付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。