最近我拜訪了一家網(wǎng)站開發(fā)公司,他們展示了一些酷炫的技術(shù),包括一些網(wǎng)頁魔法。他們向我展示了一個(gè)驚人的特效,稱之為“拜訪后變顏色的CSS”。
body { background-color: #f5f5f5; } a:link { color: blue; } a:visited { color: green; }
這個(gè)CSS使用了一個(gè)簡(jiǎn)單的技巧,根據(jù)鏈接的狀態(tài)改變顏色。當(dāng)用戶第一次訪問鏈接時(shí),它會(huì)保持鏈接的默認(rèn)顏色,但是一旦用戶訪問過這個(gè)鏈接,它就會(huì)變成一個(gè)全新的顏色。這給用戶的瀏覽體驗(yàn)帶來了無盡的可能性。
我感到非常驚嘆,于是我問他們?nèi)绾螌?shí)現(xiàn)這一技巧。他們解釋說,這其實(shí)很簡(jiǎn)單,只需要使用一些基本的CSS代碼,就能實(shí)現(xiàn)這個(gè)特效。
首先,這個(gè)CSS代碼使用了一個(gè)“背景顏色”命令,將指定的背景顏色應(yīng)用到整個(gè)頁面。然后,當(dāng)用戶第一次點(diǎn)擊一個(gè)鏈接時(shí),它就會(huì)保持默認(rèn)顏色。但是,當(dāng)用戶第二次訪問該鏈接時(shí),就會(huì)應(yīng)用一個(gè)不同的顏色,稱之為“已訪問顏色”。
這個(gè)CSS代碼利用了CSS中的偽類選擇器(:link和:visited)。這個(gè)選擇器允許我們根據(jù)鏈接的狀態(tài)(已訪問或未訪問)來修改樣式。
這種技術(shù)可以應(yīng)用到任何網(wǎng)站,因?yàn)樗皇褂昧嘶镜腍TML和CSS代碼,沒有用到任何高級(jí)的技巧。讓你的網(wǎng)頁看起來更好,讓你的用戶瀏覽體驗(yàn)更好!