用戶常常忘記在網(wǎng)頁設(shè)計時處理已訪問鏈接樣式，導致已訪問的鏈接和未訪問的鏈接采用同樣的樣式。但是，不同的已訪問鏈接樣式可以幫助用戶，讓他們知道哪些頁面或站點他們已經(jīng)訪問過了，避免不必要的取消操作。
【示例】在網(wǎng)站建設(shè)時通過在每個已訪問鏈接的旁邊添加一個提示框，就可以創(chuàng)建一種非常簡單的已訪問鏈接樣式：
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>
為未訪問狀態(tài)和已訪問狀態(tài)創(chuàng)建單一圖像，然后按照與前面一樣的方式應(yī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)站設(shè)計時結(jié)合使用JavaScript和CSS創(chuàng)建了樣式獨特的鏈接提示。但是，通過使用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>
這個鏈接設(shè)置類名為tooltip，以便從其他鏈接中區(qū)分出來。在這個鏈接中，添加希望顯示為鏈接文本的文本，然后是包圍在span中的鏈接提示文本。將鏈接提示包圍在圓括號中，這樣的話在樣式關(guān)閉時這個句子仍然是有意義的。首先，將a的position屬性設(shè)置為relative。這樣就可以相對于父元素的位置對span的內(nèi)容進行絕對定位。不希望鏈接提示在最初就顯示出來，所以應(yīng)該將它的display屬性設(shè)置為none。
a.tooltip{ position:relative;}
a.tooltip span{ display:none;}
當鼠標停留在這個錨上時，希望顯示span的內(nèi)容。方法是將span的display屬性設(shè)置為block，但是只在鼠標停留在這個鏈接上時這樣做。如果現(xiàn)在測試此代碼，當鼠標停留在這個鏈接上時，鏈接的旁邊會出現(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看起來像鏈接提示。可以給span加一些填充、一個邊框和背景顏色。
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;}
當前文章標題：如何在網(wǎng)頁設(shè)計時定義已訪問樣式
當前URL：http://mnamateurbaseball.com/news/wzzz/3078.html
