用户常常忘记在网页设计时处理已访问链接样式,导致已访问的链接和未访问的链接采用同样的样式。但是,不同的已访问链接样式可以帮助用户,让他们知道哪些页面或站点他们已经访问过了,避免不必要的取消操作。
【示例】在网站建设时通过在每个已访问链接的旁边添加一个提示框,就可以创建一种非常简单的已访问链接样式:
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;}
当前文章标题:如何在网页设计时定义已访问样式
当前URL:http://www.lyjtt.cn/news/wzzz/3078.html
上一篇:网页设计中的模拟按钮样式
下一篇:在网页设计中定义鼠标指针样式