（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-1電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-1電子課件CSS 3創(chuàng)建網(wǎng)頁(yè)菜單項(xiàng)目八授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識(shí)準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練一 項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)用CSS 3美化項(xiàng)目列表；用CSS 3制作網(wǎng)頁(yè)菜單。用CSS 3美化超鏈接；二 知識(shí)準(zhǔn)備CSS 3美化超鏈接；CSS 3美化項(xiàng)目列表。CSS 3美化超鏈接1.改變超鏈接的基本樣式偽類(lèi)是CSS本身定義的一種類(lèi)，使用偽類(lèi)可以定義超鏈接在不同狀態(tài)下的樣式效果。超鏈接的偽類(lèi)有四種狀態(tài)，詳細(xì)信息如表所示。想要定義未被訪問(wèn)的超鏈接樣式，可以通過(guò)a:link來(lái)實(shí)現(xiàn)，要設(shè)

2、置被訪問(wèn)過(guò)的超鏈接樣式，可以通過(guò)a:visited來(lái)實(shí)現(xiàn)，要設(shè)置鼠標(biāo)經(jīng)過(guò)和激活時(shí)的樣式用a:hover和a:active來(lái)實(shí)現(xiàn)。屬性說(shuō)明a:link定義a元素未訪問(wèn)時(shí)的樣式a:visited定義a元素訪問(wèn)后的樣式a:hover定義鼠標(biāo)經(jīng)過(guò)顯示的樣式a:active定義鼠標(biāo)單擊激活時(shí)的樣式CSS 3美化超鏈接1.改變超鏈接的基本樣式a:linkCSS樣式a:visitedCSS樣式a:hoverCSS樣式a:activedCSS樣式定義這四個(gè)偽類(lèi)，必須按照“l(fā)ink、visited、hover、active”的順序進(jìn)行，不然瀏覽器可能無(wú)法正常顯示這4種樣式。格式為：CSS 3美化超鏈接2.設(shè)置帶

3、有提示信息的超鏈接超鏈接的文字比較簡(jiǎn)潔，有時(shí)候不能表達(dá)這個(gè)超鏈接的含義，通常是為超鏈接添加上一些介紹性信息，即提示信息。要設(shè)置這樣的信息，可以通過(guò)超鏈接信息的描述標(biāo)記title來(lái)實(shí)現(xiàn)，title屬性的值為提示的內(nèi)容。格式如下：CSS 3美化超鏈接2.設(shè)置帶有提示信息的超鏈接【例8-1】超鏈接基本樣式和提示信息實(shí)例，代碼如下所示（示例文件8-1.html）。超鏈接基本樣式和提示信息#nav1padding:20px; acolor:#545454;text-decoration: none;margin:3px;padding: 3px;a:linkcolor:#545454;a:visited

4、color:#545454;a:hovercolor:#f60;text-decoration: underline;a:activecolor:#f63;首頁(yè)|產(chǎn)品展示|售后服務(wù)|聯(lián)系我們|關(guān)于我們?cè)赾hrome瀏覽器中預(yù)覽CSS 3美化超鏈接3.設(shè)置超鏈接的背景圖超鏈接不僅可以使用文字，也可是使用背景圖片加文字和背景顏色加文字的形式來(lái)顯示，這樣的超鏈接會(huì)更加精美。超鏈接添加背景圖片，使用background-image來(lái)實(shí)現(xiàn)，超鏈接添加背景顏色，使用background-color來(lái)實(shí)現(xiàn)。CSS 3美化超鏈接3.設(shè)置超鏈接的背景圖【例8-2】設(shè)置超鏈接的背景顏色實(shí)例，代碼如下所示（示例文件

5、8-2.html）。.navmargin:20px;font-size:14px;font-family: 微軟雅黑;a color:#333;text-decoration:none;display: block;float: left;text-align: center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-left:6px;a:hover background-color:#F60; color:#fff在chrome瀏覽器中預(yù)覽 首頁(yè) 關(guān)于我們 產(chǎn)品展示 售后服務(wù) 聯(lián)

6、系我們 CSS 3美化超鏈接4.設(shè)置超鏈接的按鈕效果為了增強(qiáng)超鏈接的視覺(jué)效果，會(huì)將超鏈接模擬成表單按鈕，當(dāng)鼠標(biāo)指針移動(dòng)到一個(gè)超鏈接上的時(shí)候，超鏈接的文本或者圖片就會(huì)像被按下，有種凹陷的效果。其實(shí)現(xiàn)方式是利用CSS中的a:hover，當(dāng)鼠標(biāo)經(jīng)過(guò)連接時(shí)，鏈接向下、向右各移一個(gè)像素，這樣顯示效果就想按鈕按下了一樣。CSS 3美化超鏈接4.設(shè)置超鏈接的按鈕效果【例8-3】超鏈接按鈕效果實(shí)例，代碼如下所示（示例文件8-3.html）。#navmargin-top:10px; padding:20px;border:1px red solid;afont-family: 微軟雅黑;text-align:

7、center;margin:3px;a:link,a:visitedcolor:#ac2300;padding:4px 10px 4px 10px;background-color: #ccd8db;text-decoration: none;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee;border-bottom:1px solid #717171;border-right:1px solid #717171;a:hovercolor:#821821;padding:5px 8px 3px 12px;background

8、-color: #e2c4c9;text-decoration: none;border-top:1px solid #717171;border-left:1px solid #717171;border-bottom:1px solid #eeeeee;border-right:1px solid #eeeeee;首頁(yè)關(guān)于我們品牌特賣(mài)產(chǎn)品展示聯(lián)系我們?cè)赾hrome瀏覽器中預(yù)覽CSS 3美化超鏈接5.設(shè)置超鏈接的鼠標(biāo)樣式想要在網(wǎng)頁(yè)中實(shí)現(xiàn)鼠標(biāo)樣式改變的效果，可以通過(guò)CSS屬性設(shè)置來(lái)實(shí)現(xiàn)。CSS3中鼠標(biāo)箭頭樣式可以通過(guò)cursor屬性來(lái)實(shí)現(xiàn)。cursor屬性有17個(gè)屬性值，對(duì)應(yīng)鼠標(biāo)的17個(gè)樣式，

9、常用如表所示。當(dāng)鼠標(biāo)經(jīng)過(guò)超鏈接是可以使用這些鼠標(biāo)樣式，達(dá)到相應(yīng)的效果。cursor值描述url需使用的自定義光標(biāo)的default默認(rèn)光標(biāo)（通常是一個(gè)箭頭）auto默認(rèn)，瀏覽器設(shè)置的光標(biāo)crosshair光標(biāo)呈現(xiàn)為十字線pointer光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）move此光標(biāo)指示某對(duì)象可被移動(dòng)e-resize此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)ne-resize此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）nw-resize此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）n-resize此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)se-resize此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）sw-resize此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）s-resize此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）w-resize此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）text此光標(biāo)指示文本wait此光標(biāo)指示程序正忙（通常是一只表或沙漏）help此光標(biāo)指示可用的幫助（通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球）作業(yè)一、選擇題1.下列超鏈接狀態(tài)中，_是錯(cuò)誤的。A a是聲明超鏈接樣式 B a:link設(shè)置已鏈接的樣式C