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

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

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>

為未訪(fǎng)問(wèn)狀態(tài)和已訪(fǎng)問(wèn)狀態(tài)創(chuàng )建單一圖像，然后按照與前面一樣的方式應用背景圖像。背景圖像給錨和已訪(fǎ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è)已訪(fǎng)問(wèn)站點(diǎn)的旁邊顯示一個(gè)圖標標記，這個(gè)反饋圖標表示訪(fǎng)問(wèn)者已經(jīng)訪(fǎng)問(wèn)過(guò)該鏈接。

定義提示樣式

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

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

<p>

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

</p>

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

a.tooltip{    position:relative;}

a.tooltip span{    display:none;}

當鼠標停留在這個(gè)錨上時(shí)，希望顯示span的內容。方法是將span的display屬性設置為block，但是只在鼠標停留在這個(gè)鏈接上時(shí)這樣做。如果現在測試此代碼，當鼠標停留在這個(gè)鏈接上時(shí)，鏈接的旁邊會(huì )出現span文本。為了讓span的內容出現在錨的右下方，需要將span的position屬性設置為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;}