用戶常常忘記在網(wǎng)頁(yè)設(shè)計(jì)時(shí)處理已訪問(wèn)鏈接樣式，導(dǎo)致已訪問(wèn)的鏈接和未訪問(wèn)的鏈接采用同樣的樣式。但是，不同的已訪問(wèn)鏈接樣式可以幫助用戶，讓他們知道哪些頁(yè)面或站點(diǎn)他們已經(jīng)訪問(wèn)過(guò)了，避免不必要的取消操作。

【示例】在網(wǎng)站建設(shè)時(shí)通過(guò)在每個(gè)已訪問(wèn)鏈接的旁邊添加一個(gè)提示框，就可以創(chuàng)建一種非常簡(jiǎn)單的已訪問(wèn)鏈接樣式：

a:visited {    padding-right:20px;    background:url(check.gif)right middle;}

假設(shè)在邊欄中有一系列外部鏈接。

<ul>    

<li><a href="http://www.baidu.com/" 

target="-blank">百度</a></li>    

<li><a href="http://www.google.com.hk/" target="-blank">谷歌</a></li>    

<li><a href="http://www.sina.com/" target="-blank">新浪</a></li>    

<li><a href="http://www.sohu.com/" target="-blank">搜狐</a></li></ul>

為未訪問(wèn)狀態(tài)和已訪問(wèn)狀態(tài)創(chuàng)建單一圖像，然后按照與前面一樣的方式應(yīng)用背景圖像。背景圖像給錨和已訪問(wèn)狀態(tài)添加了樣式。

ul{list-style:none; }li{margin:5px; }li a{    

display:block;    

width:300px;    

height:30px;    

line-height:30px;    

color:#000;    

text-decoration: none;

background:#9488E9 url(images/visited.gif) no-repeat left top;    

text-indent:l0px;}li a:visited{    background-position:right top;}

每個(gè)已訪問(wèn)站點(diǎn)的旁邊顯示一個(gè)圖標(biāo)標(biāo)記，這個(gè)反饋圖標(biāo)表示訪問(wèn)者已經(jīng)訪問(wèn)過(guò)該鏈接。

定義提示樣式

鏈接提示是當(dāng)鼠標(biāo)停留在具有title屬性的元素上時(shí)一些瀏覽器彈出的黃色小文本框。一些開(kāi)發(fā)人員在網(wǎng)站設(shè)計(jì)時(shí)結(jié)合使用JavaScript和CSS創(chuàng)建了樣式獨(dú)特的鏈接提示。但是，通過(guò)使用CSS定位技術(shù)，可以創(chuàng)建純CSS鏈接提示。

【示例】先創(chuàng)建結(jié)構(gòu)良好且有意義的HTML結(jié)構(gòu)。

<p>

<a href="http://www.baidu.com/" class="tooltip">百度<span>（百度一下，你就知道）</span></a>

</p>

這個(gè)鏈接設(shè)置類名為tooltip，以便從其他鏈接中區(qū)分出來(lái)。在這個(gè)鏈接中，添加希望顯示為鏈接文本的文本，然后是包圍在span中的鏈接提示文本。將鏈接提示包圍在圓括號(hào)中，這樣的話在樣式關(guān)閉時(shí)這個(gè)句子仍然是有意義的。首先，將a的position屬性設(shè)置為relative。這樣就可以相對(duì)于父元素的位置對(duì)span的內(nèi)容進(jìn)行絕對(duì)定位。不希望鏈接提示在最初就顯示出來(lái)，所以應(yīng)該將它的display屬性設(shè)置為none。

a.tooltip{    position:relative;}

a.tooltip span{    display:none;}

當(dāng)鼠標(biāo)停留在這個(gè)錨上時(shí)，希望顯示span的內(nèi)容。方法是將span的display屬性設(shè)置為block，但是只在鼠標(biāo)停留在這個(gè)鏈接上時(shí)這樣做。如果現(xiàn)在測(cè)試此代碼，當(dāng)鼠標(biāo)停留在這個(gè)鏈接上時(shí)，鏈接的旁邊會(huì)出現(xiàn)span文本。為了讓span的內(nèi)容出現(xiàn)在錨的右下方，需要將span的position屬性設(shè)置為absolute，并且將它定位到距離錨頂部lem，距離左邊2em。

a.tooltip:hover span {     

display:block;     

position:absolute;     

top:lem;    

 left:2em;}

這就是這種技術(shù)的主體部分。余下的工作是添加一些樣式讓span看起來(lái)像鏈接提示?？梢越ospan加一些填充、一個(gè)邊框和背景顏色。

a.tooltip:hover span{     display:block;     

position:absolute;     

top:lem;     

left:2em;     

padding:0.2em 0.6em;     

border:1px solid #996633;     

background-color:#FFFF66;     

color:#000;}