首页 > 网站建设 >

网站制作时如何处理链接视觉效果经验分享

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

 网站制作公司(博纳网络)在上篇文章中介绍了静态网站制作,框架网站设计的实际操作案例,今天深圳网站制作公司就网站建设中对于链接外观的设计经验进行分享。
一、网站制作设计链接样式网页链接的外观:
  网站设计时链接外观蓝色、下划线,这种默认样式没有吸引力,使用CSS可以产生令人吃惊的效果。定义普通样式对链接应用样式最容易的方式是使用类型选择器。例如,以下规则将使所有链接显示为红色。a{color:red;}但是,锚可以作为内部引用,也可以作为外部链接,所以使用类型选择器不总是理想的。
例如,下面的第一个锚包含一个片段标识符,当用户单击这个锚时,页面将跳到第二个锚的位置。
<p><ahref="#mainContent">跳转到标题位置</a></p>
<h1><aname="mainContent"></a></h1>虽然只想让真正的链接变成红色,但是标题的内容也成了红色的。为了避免这个问题,CSS提供了两个特殊的选择器,即链接伪类选择器。
☑ :link伪类选择器用来寻找没有被访问过的链接。
☑ :visited伪类选择器用来寻找被访问过的链接。
【示例】在下面的示例中定义两个样式,设置所有没有被访问过的链接将是蓝色的,所有被访问过的链接将是绿色的。
a:link{color:blue;}a:visited{color:green;}可以用来对链接应用样式的另外两个选择器是:hover和:active动态伪类选择器。
☑ :hover动态伪类选择器用来寻找鼠标停留处的元素。
☑ :active动态伪类选择器用来寻找被激活的元素。对于链接来说,激活发生在链接被单击时。所以,在下面的示例中,当鼠标停留在链接上或单击链接时链接将变成红色。a:hover,a:active{color:red;}很多设计师最初使用这些选择器的目的之一是去掉链接的下划线,然后在鼠标停留在链接上或单击链接时打开下划线。实现的方法是将未访问和已访问的链接的text-decoration属性设置为none,将鼠标停留和激活的链接的text-decoration属性设置为underline。
在上面示例中,选择器的排列是非常重要的。如果顺序反过来,鼠标停留和激活样式就不起作用了。
这是由层叠造成的,当两个规则具有相同的特殊性时,后定义的规则优先。在这个示例中,两个规则具有相同的特殊性,所以:link和visited样式将覆盖:hover和:active样式。为了确保不会发生这种情况,最好按照以下顺序应用链接样式。
☑ a:link
☑a:visited
☑ a:hover
☑ a:active
二、网站制作链接定义下划线样式
   定义下划线样式从易用性和可访问性的角度分析,通过颜色之外的某些方式让链接区别于其他内容是很重要的。这是因为有视觉障碍的人很难区分对比不强烈的颜色,尤其是在文本比较小的情况下。例如,有色盲症的人无法区分具有相似亮度或饱和度的某些颜色。因此,链接在默认情况下会加上下划线。下划线让页面看上去比较乱。如果决定去掉链接的下划线,那么可以让链接显示为粗体。这样页面看起来没那么乱,而链接仍然醒目。当鼠标停留在链接上或激活链接时,可以重新应用下划线,从而增强其交互状态。也可以使用边框创建不太影响美观的下划线。
【示例】在下面示例中,取消默认的下划线,将它替换为不太刺眼的点线。当鼠标停留在链接上或激活链接时,这条线变成实线,从而为用户提供视觉反馈。
通过使用图像创建链接下划线,可以产生非常有意思的效果。例如,创建了一个非常简单的下划线图像,它由点线组成,可以使用以下代码将这个图像应用于链接。

显示效果如图所示 设计下划线样式这种方式并不限于link和visited样式。在下面示例中,为hover和active状态创建了一个动画GIF,然后使用以下CSS应用它。当鼠标停留在链接上或单击链接时,点线从左到右滚动出现,这就产生了一种有意思的效果。并非所有浏览器都支持背景图像动画,但是不支持这个特性的浏览器常常会显示动画的第一帧,这确保效果在老式浏览器中可以平稳退化。当然使用动画要小心,因为它会对某些用户造成可访问性问题。深圳网站制作公司(博纳网络)关于网站设计制作时链接样式的文章我们今天就介绍到这里,关于网站制作知识方面的文章全文未完,我们会持续更新这方面的内容,同时也希望本站能给您的工作带来帮助。
文章标题:网站制作时如何处理链接视觉效果经验分享
本文地址:https://www.198bona.com/news/1335.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯