首页 > 网站建设 >

网站制作怎样合理定义已访问样式与提示访问样式?

发布时间:2018-09-11 作者:深圳网站制作

 网站制作公司(博纳网络)在上篇文章分享了“如何正确处理网站制作过程中产生的链接标识”。现在我们会接上篇文章内容,分享我们网站前端设计工程师如何在页面制作时定义网站链接“已访问样式的”。深圳网站设计公司,希望通过这种方式能让我们的客户在管理网站时能轻松面对您所碰见的问题。
一、网站设计制作技巧之定义已访问样式
  已访问样式用户常常忘记处理已访问链接样式,导致已访问的链接和未访问的链接采用同样的样式。但是,不同的已访问链接样式可以帮助用户,让他们知道哪些页面或站点他们已经访问过了,避免不必要的取消操作。
【示例】通过在每个已访问链接的旁边添加一个提示框,就可以创建一种非常简单的已访问链接样式:
a:visited{padding-right:20px;
background:url(check.gif)rightmiddle;
}
假设在边栏中有一系列外部链接。<ul>
<li><ahref="http://www.baidu.com/"target="_blank">百度</a></li>
<li><ahref="http://www.google.com.hk/"target="_blank">谷歌</a></li>
<li><ahref="http://www.sina.com/"target="_blank">新浪</a></li>
<li><ahref="http://www.sohu.com/"target="_blank">搜狐</a></li>
</ul>
为未访问状态和已访问状态创建单一图像,然后按照与前面一样的方式应用背景图像。背景图像给锚和已访问状态添加了样式。每个已访问站点的旁边显示一个图标标记,这个反馈图标表示访问者已经访问过该链接。

二、网页制作技巧之之:定义提示样式
  链接提示是当鼠标停留在具有title属性的元素上时一些浏览器弹出的黄色小文本框。一些开发人员结合使用JavaScript和CSS创建了样式独特的链接提示。但是,通过使用CSS定位技术,可以创建纯CSS链接提示。
【示例】先创建结构良好且有意义的HTML结构。
<p>
<ahref="http://www.baidu.com/"class="tooltip">百度<span>(百度一下,你就知道)</span></a>
</p>
这个链接设置类名为tooltip,以便从其他链接中区分出来。在这个链接中,添加希望显示为链接文本的文本,然后是包围在span中的链接提示文本。将链接提示包围在圆括号中,这样的话在样式关闭时这个句子仍然是有意义的。首先,将a的position属性设置为relative。这样就可以相对于父元素的位置对span的内容进行绝对定位。不希望链接提示在最初就显示出来,所以应该将它的display属性设置为none。当鼠标停留在这个锚上时,希望显示span的内容。方法是将span的display属性设置为block,但是只在鼠标停留在这个链接上时这样做。如果现在测试此代码,当鼠标停留在这个链接上时,链接的旁边会出现span文本。为了让span的内容出现在锚的右下方,需要将span的position属性设置为absolute,并且将它定位到距离锚顶部lem,距离左边2em。
a.tooltip:hoverspan{
display:block;
position:absolute;
top:lem;
left:2em;
}
这就是这种技术的主体部分。余下的工作是添加一些样式让span看起来像链接提示。可以给span加一些填充、一个边框和背景颜色。最后演示效果如图3.33所示。
a.tooltip:hoverspan{
display:block;
position:absolute;
top:lem;
left:2em;
padding:0.2em0.6em;
border:1pxsolid#996633;
background-color:#FFFF66;
color:#000;
}
链接提示样式注意:绝对定位元素的定位相对于最近的已定位祖先元素,如果没有,就相对于根元素。在这个示例中,已经定位了a,所以span相对于a进行定位。
a.tooltip:hover{
font-size:100%;}
好了,关于网站制作时如何定义了连接样式与定义提示样式的方法今天就介绍到这里。深圳网站制作(博纳网络)在后期的文章中将继续举例说明我们在网页制作时处理以上两个问题的实操案例。希望本文能对您的网站管理或者网页制作设计之路有所帮助。
 
文章标题:网站制作怎样合理定义已访问样式与提示访问样式?
本文地址:https://www.198bona.com/news/1349.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯