用户常常忘记在网页设计时处理已访问链接样式，导致已访问的链接和未访问的链接采用同样的样式。但是，不同的已访问链接样式可以帮助用户，让他们知道哪些页面或站点他们已经访问过了，避免不必要的取消操作。

【示例】在网站建设时通过在每个已访问链接的旁边添加一个提示框，就可以创建一种非常简单的已访问链接样式：

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>

为未访问状态和已访问状态创建单一图像，然后按照与前面一样的方式应用背景图像。背景图像给锚和已访问状态添加了样式。

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

每个已访问站点的旁边显示一个图标标记，这个反馈图标表示访问者已经访问过该链接。

定义提示样式

链接提示是当鼠标停留在具有title属性的元素上时一些浏览器弹出的黄色小文本框。一些开发人员在网站设计时结合使用JavaScript和CSS创建了样式独特的链接提示。但是，通过使用CSS定位技术，可以创建纯CSS链接提示。

【示例】先创建结构良好且有意义的HTML结构。

<p>

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

</p>

这个链接设置类名为tooltip，以便从其他链接中区分出来。在这个链接中，添加希望显示为链接文本的文本，然后是包围在span中的链接提示文本。将链接提示包围在圆括号中，这样的话在样式关闭时这个句子仍然是有意义的。首先，将a的position属性设置为relative。这样就可以相对于父元素的位置对span的内容进行绝对定位。不希望链接提示在最初就显示出来，所以应该将它的display属性设置为none。

a.tooltip{    position:relative;}

a.tooltip span{    display:none;}

当鼠标停留在这个锚上时，希望显示span的内容。方法是将span的display属性设置为block，但是只在鼠标停留在这个链接上时这样做。如果现在测试此代码，当鼠标停留在这个链接上时，链接的旁边会出现span文本。为了让span的内容出现在锚的右下方，需要将span的position属性设置为absolute，并且将它定位到距离锚顶部lem，距离左边2em。

a.tooltip:hover span {     

display:block;     

position:absolute;     

top:lem;    

 left:2em;}

这就是这种技术的主体部分。余下的工作是添加一些样式让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;}