首页 > 网站建设 >

网站制作前端如何正确处理链接标识?

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

 网站制作公司(博纳网络)在前面的文章分享了如何处理网站链接视觉效果。今天深圳网站制作网站前端设计师详细讲解网站制作如何设置链接标识,希望本文对您的网站后期管理工作能带来帮助,您也可以在线咨询我们的技术客服。

一、网站制作公司之设置链接标识
  链接类型标识在很多网站中,很难看出链接是指向网站中另一个页面,还是指向另一个站点。为了解决这个问题,许多站点在新窗口中打开外部链接。但是,这不是好办法,最好的解决方案是让外部链接看起来不一样,让用户自己选择是离开当前站点,还是在新窗口或新的标签页中打开这个链接。可以在外部链接旁边加一个小图标,而且对于离站链接的图标已经出现了一种约定:一个框加一个箭头。实现这种效果最容易的方法是在所有外部链接上加一个类,然后将图标作为背景图像应用。
【示例】在下面的示例中,给链接设置少量的右填充,从而给图标留出空间,然后将图标作为背景图像应用于链接的右上角,
如图3.30所示。尽管这个方法是有效的,但是它不太优雅,因为必须手工地在每个外部链接上添加类。有办法让CSS判断链接是否是外部链接吗?实际上,确实有办法,这就是使用属性选择器。属性选择器允许根据特定属性是否存在或属性值来寻找元素。CSS3扩展了它的功能,提供了子字符串匹配属性选择器。顾名思义,这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。CSS3还没有成为正式的规范,所以使用这些高级选择器可能会使代码失效。但是,许多符合标准的浏览器(如Firefox和Safad)已经支持这些CSS3选择器了,所以从最终规范中去掉它们的可能性是很小的。这种技术的工作方式是使用[att^=val]属性选择器寻找以文本http:开头的所有链接。这应该会突出显示所有外部链接。但是也会选中使用绝对URL而不是相对URL的内部链接。为了避免这个问题,需要重新设置指向网站内部的所有链接,删除它们的外部链接图标。方法是匹配指向自己网站域名的链接,删除外部链接图标,重新设置右填充。大多数符合标准的浏览器都支持这种技术,而老式浏览器(如IE6及更低版本)会忽略它。还可以扩展这种技术,如对邮件链接也进行突出显示。在下面的示例中,在所有mailto链接上添加一个小的邮件图标。a[href^="mailto:"]{background:url(images/email.png)no-repeatrighttop;padding-right:l0px;甚至可以突出显示非标准的协议,如用小的图标突出显示。突出显示可下载的文档和提要另一种不好的常见情况是,单击一个链接,本以为会进入另一个页面,却开始下载一个PDF或Word文档。幸运的是,CSS也可以帮助区分这些类型的链接。这要使用[att$=val]属性选择器,它寻找以特定值(如.pdf或.doc)结尾的属性。采用与前面示例相似的方式,可以用不同的图标突出显示Word和PDF文档。这样访问者就知道它们是文档下载,而不是链接到另一个页面的链接。为了避免可能发生的混淆,读者还可以通过类似的方法用RSS图标突出显示链接的RSS提要。通过提醒用户注意离站链接或可下载的文档,让他们明确地了解在单击链接时会发生的情况,避免了不必要的取消操作和烦恼。

二、网站制作链接标识之模拟按钮
 样式a是行内元素,只有在单击链接的内容时才会激活链接。但是,有时候希望它显示为按钮样式,因此可以将a的display属性设置为block,然后修改width、height和其他属性来创建需要的样式和单击区域。
【示例1】在页面中为所有链接定义按钮样式效果,由于链接现在显示为块级元素,单击块中的任何地方都会激活链接。a{display:block;width:6em;padding:0.2em;line-height:1.4:background-color:#g488E9;border:lpxsolidblack;color:#000;text-decoration:none;text-align:center;}在上面代码中,宽度是以em为单位显式设置的。由于块级元素会扩展,填满可用的宽度,所以如果父元素的宽度大于链接所需的宽度,那么需要将希望的宽度应用于链接。如果希望在页面的主内容区域中使用这种样式的链接,就很可能出现这种情况。但是,如果这种样式的链接出现在宽度比较窄的地方(如边栏)中,那么可能只需设置父元素的宽度,而不需要为链接的宽度担心。为什么使用line-height属性定义按钮的高度,而不是使用height属性?这实际上是一个小技巧,能够使按钮中的文本垂直居中。如果设置height,就必须使用填充将文本压低,模拟出垂直居中的效果。但是,文本在行框中总是垂直居中的,所以如果使用line-height属性,文本就会出现在框的中间。上述缺点:如果按钮中的文本占据两行,按钮的高度就是需要的高度的两倍。避免这个问题的唯一方法是调整按钮和文本的尺寸,让文本不换行,至少在文本字号超过合理值之前不会换行。使用:hover伪类就可以创建翻转效果,不需要JavaScript。如在鼠标停留时设置链接的背景和文本颜色,从而实现非常简单的动态效果。a:hover{background-color:#369;color:#fff;}
【示例2】修改背景颜色对于简单的按钮很合适,但是对于比较复杂的按钮,最好使用背景图像。在下面示例中,创建了两个按钮图像,一个用于正常状态,一个用于鼠标停留状态,也可以添加激活状态,即使用:active动态伪类触发。预览效果如图3.31所示。上面代码与前面示例相似。主要的差异是使用背景图像而不是背景颜色,同时使用固定宽度和高度的按钮,所以在CSS中设置显式的像素尺寸。但是,也可以创建特大的按钮图像,或者结合使用背景颜色和图像创建流体的或弹性的按钮。
【示例3】多图像方法的主要缺点是在浏览器第一次装载鼠标停留图像时有短暂的延迟。这会造成闪烁效果,让按钮感觉起来有点儿反应迟钝。可以将鼠标停留图像作为背景应用于父元素,从而预先装载它们。但是,有另一种方法。并不切换多个背景图像,而是使用一个图像并切换它的背景位置。使用单个图像的好处是减少了服务器请求的数量,而且可以将所有按钮状态放在一个地方。首先,创建组合的按钮图像,如图3.32所示。设计背景图像在这个示例中,使用正常状态和鼠标停留状态,也可以使用激活状态和已访问状态。代码几乎与前面的示例相同。设计在正常状态下,将翻转图像对准左边,而在鼠标停留状态下对准右边。关于网站制作处和正确处理链接标识,深圳网站制作公司就介绍到这里,您可以根据本文所介绍,实际操作一遍体验一遍亲自动手给您带来满足感。喜欢本站敬请持续关注。博纳网络编辑整理。
 
文章标题:网站制作前端如何正确处理链接标识?
本文地址:https://www.198bona.com/news/1338.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯