divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3

divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3

ID:8799329

大?。?006.50 KB

頁(yè)數(shù):35頁(yè)

時(shí)間:2018-04-08

divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3_第1頁(yè)
divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3_第2頁(yè)
divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3_第3頁(yè)
divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3_第4頁(yè)
divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3_第5頁(yè)
資源描述:

《divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-3》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。

1、第五天超鏈接偽類今天我們開始學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)(div+css)》超鏈接偽類,包含以下內(nèi)容和知識(shí)點(diǎn):§鏈接的四種樣式§將鏈接轉(zhuǎn)換為塊狀§用css制作按鈕§首字下沉一、超鏈接的四種樣式本來計(jì)劃這節(jié)課放到第九章中講解,但下邊的章節(jié)都涉及到了,所以提前來學(xué)習(xí)一下,上節(jié)課講解的內(nèi)容比較多,這節(jié)課就少講些,只要理解了偽類,就輕松多了。超鏈接可以說是網(wǎng)頁(yè)發(fā)展史上一個(gè)偉大的發(fā)明,它使得許多頁(yè)面相互鏈接從而構(gòu)成一個(gè)網(wǎng)站。說到超鏈接,它涉及到一個(gè)新的概念:偽類,我們先看下超鏈接的四種樣式:a:link{color

2、:#FF0000}/*未訪問的鏈接*/a:visited{color:#00FF00}/*已訪問的鏈接*/a:hover{color:#FF00FF}/*鼠標(biāo)移動(dòng)到鏈接上*/a:active{color:#0000FF}/*選定的鏈接*/以上分別定義了超鏈接未訪問時(shí)的鏈接樣式,已訪問的鏈接樣式,鼠標(biāo)移上時(shí)鏈接樣式和選定的鏈接樣式。之所以稱之為偽類,也就是說它不是一個(gè)真實(shí)的類,正常的類是以點(diǎn)開始,后邊跟一個(gè)名稱,而它是以a開始后邊跟個(gè)冒號(hào),再跟個(gè)狀態(tài)限定字符;比如第三個(gè)a:hover的樣式,只有當(dāng)鼠標(biāo)移

3、動(dòng)到該鏈接上時(shí)它才生效,而a:visited只對(duì)已訪問過的鏈接生效。偽類使得用戶體驗(yàn)大大提高,比如我們可以設(shè)置鼠標(biāo)移上時(shí)改變顏色或下劃線等屬性來告知用戶這個(gè)是可以點(diǎn)擊的,設(shè)置已訪問過的鏈接的顏色變灰暗或加刪除線告知用戶這個(gè)鏈接的內(nèi)容已訪問過了。下面來做一個(gè)默認(rèn)狀態(tài)下是藍(lán)色,鼠標(biāo)放上是紅色加下劃線,選定(按下)時(shí)為紫色,已訪問過為灰色加刪除線的實(shí)例來講解一下。首先插入兩個(gè)帶超鏈接的內(nèi)容:

這里是鏈接

這里也是鏈接

4、p>從上圖中可以看出,插入的超鏈接默認(rèn)是藍(lán)色來下劃線的,這是標(biāo)簽的默認(rèn)樣式所致,下來我們?cè)赾ss樣式中定義設(shè)置完a:link的樣式后,下面分別設(shè)置a:visited,a:hover,a:active的樣式生成的源代碼如下:

5、g/1999/xhtml">a:link{color:#06F;text-decoration:none;}a:visited{color:#999;text-decoration:line-through;}a:hover{color:#F00;text-decoration:underline;}a:active

6、{color:#F0F;}

這里是鏈接

這里也是鏈接

??提示:可以先修改部分代碼后再運(yùn)行?注意:四種狀態(tài)的順序一定不能顛倒,否則有些不生效二、將鏈接轉(zhuǎn)換為塊級(jí)元素鏈接在默認(rèn)狀態(tài)下是內(nèi)聯(lián)元素,轉(zhuǎn)換為塊級(jí)元素后可以獲得更大的點(diǎn)擊區(qū)域,可以設(shè)置寬度和高度,將鏈接轉(zhuǎn)換為塊狀,只需增加一個(gè)display:block的css屬性即可。a{displa

7、y:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}這樣設(shè)置的結(jié)果是全局a都執(zhí)行這個(gè)樣式顯示,下面設(shè)置一下鼠標(biāo)劃過時(shí)的狀態(tài),其它幾種狀態(tài)設(shè)置方法相同

8、lns="http://www.w3.org/1999/xhtml">a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}a:hover{

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無此問題,請(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)等原因無法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。