如何去掉超链接下划线用三个简单的实例来说明

所属分类: 网页制作 / 应用技巧 阅读数: 1990
收藏 0 赞 0 分享
去掉超链接的下划线,需要用样式表CSS来控制,如果你暂时不想深入了解CSS的概念,下面将举三个简单的实例来说明如何控制超链接的下划线。用记事本打开网页源代码(也可以先用IE打开网页,然后点击IE菜单栏的"查看→源文件"),然后弹出记事本窗口。

找到<head>和</head>这两句,样式表语句就加在它们中间。如下:

复制代码
代码如下:

<html>
<head>
<style>a{TEXT-DECORATION:none}</style>
</head><body>

一、仅仅在head与head中间加入<style>a{ TEXT-DECORATION:none }</style>
这一句就去掉超链接下划线了,这是个最简单的例子,你试着这样做就会成功的。

二、上面的例子只是告诉你如何一次性去掉超链接下划线,如果你的网页当中有的超链接需要下划线,有的不需要,该怎么办呢?首
先你要构思好,你的网页中的超链接大部分是有下划线的,还是没下划线的?
如果大部分超链接不要下划线,就可以加入
<style> a{ TEXT-DECORATION:none }</style>这一句,然后在少数要下划线的超链接里使用这个方法,它就有下划线了:
<a href=****><u>文字</a>。
·如果大部分超链接都要下划线,就可以不要加入前面提到的这句。把它改为:<style>.n{ TEXT-DECORATION:none }</style>,
注意:n前面有个点,它表示类选择符,然后在网页的超链接当中可以多次引用,就可单独去掉个别超链接了,例如:

复制代码
代码如下:

<a class=n href=http://www.webshu.com>网页树树</a>
<a class=n href=http://www.cctv.com>中央电视台</a>
<a class=n href=http://www.ziyy.com>自由泳网</a>

三、如何让超链接去掉下划线,鼠标停留在上面时有下划线?
可以在head与head之间加上这样一句:<style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>
说明:a表示超链接,a:hover在样式表里属于伪类,表示鼠标悬停时候的状态。
确定你的网页大部分超链接需要哪种效果。再举个实例说明一下:

复制代码
代码如下:

<style>a{ TEXT-DECORATION:none }a.xh{ TEXT-DECORATION:none }
a:hover.xh{ TEXT-DECORATION:underline }</style>,它等价于<style>
a,a.xh{ TEXT-DECORATION:none }a:hover.xh{ TEXT-DECORATION:underline }</style>

加入这句之后,网页内的超链接都没有下划线。
由上可以看出,我们又用了一次CSS伪类,它的定义格式是:选择符.类选择符{ 属性;属性值 },例如前面提到的
a.xh{ TEXT-DECORATION:none }。
更多精彩内容其他人还在看

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多