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

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

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

假設在邊欄中有一系列外部鏈接。

<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>

為未訪問狀態(tài)和已訪問狀態(tài)創(chuàng)建單一圖像，然后按照與前面一樣的方式應用背景圖像。背景圖像給錨和已訪問狀態(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;}

每個已訪問站點的旁邊顯示一個圖標標記，這個反饋圖標表示訪問者已經(jīng)訪問過該鏈接。

定義提示樣式

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

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

<p>

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

</p>

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

a.tooltip{    position:relative;}

a.tooltip span{    display:none;}

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

a.tooltip:hover span {     

display:block;     

position:absolute;     

top:lem;    

 left:2em;}

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

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;}