如何去除超链接的下划线？

更新时间：2023-08-05 19:05:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

如何去掉frontpage网页中的超链接下划线？并添加特效？

Microsoft FrontPage技巧之一：如何去除超链接的下划线

用Frontpage做网页的时候,，一些文字编辑超链接后这些字会自动有下划线，很难看。如何去除这个下划线呢?

去除超链接的下划线有两种方法：一种就是鼠标放上超链接去的时候下划线消失；另一种不管鼠标放上去与否均可消失.两种方式各有特色.。可以根据自己的喜好选择。

1. 制作超链接的时候就去掉下划线：

首先选取你要进行去除下划线的超链接.单击鼠标右键.点击“超链接属性”(或直接点击超链接图标.或者点击菜单栏的插入--超链接)打开编辑超链接对话框.在编辑超链接对话框中.点右下角的[样式".在修改样式对话框中点击“格式"--字体.同样点选“闪烁”.然后确定就OK了.你看你的超链接是不是很醒目的干干净净.没有了下划线?

2. 鼠标放上去的时候没有了下划线：

在 FrontPage中打开你要改变超链接的网页，点击右键打开网页属性(也可以打开文件--属性)在背景属性中，点选“启用超链接翻转效果”，在翻转样式的字体中点选闪烁.如果你希望进行超链接的字体变化.也可以在上面的字体中选取.然后确定.这时预览一下你的网页.是不是上面所有的超链接在鼠标放上去的时候都没有了下划线?

（亦可以在网页属性的常规中点击左下角的“样式”在修改样式对话框的下面点击“格式”--字体.在字体对话框的效果中点选闪烁--然后确定.同样的效果也出现了. ）

以上两种都设置，效果会更漂亮一些的！

3.更加丰富的效果：（嫌麻烦的可以不学）

去掉超链接下划线及颜色

一、找到<head>和</head>这两句了吗？样式表语句就加在它们中间。如下：

<html>

<head>

如何去掉frontpage网页中的超链接下划线？并添加特效？

</head>

<body>

仅仅加入<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.77cn.com.cn>网页树树</a>

<a class=n href=http://www.77cn.com.cn>中央电视台</a>

<a class=n href=http://www.77cn.com.cn>自由泳网</a>

三、如何让超链接去掉下划线，鼠标停留在上面时有下划线？

可以改为这句：<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>，这在前面介绍的《样式表简明教程》中有介绍。加入这句之后，网页内的超链接都没有下划线，如果你想让一部分超链接初始无下划线，鼠标悬停时有下划线，就用这种方法：

<a class=xh href=http://www.77cn.com.cn>网页树树</a>

<a class=xh href=http://www.77cn.com.cn>中央电视台</a>

如何去掉frontpage网页中的超链接下划线？并添加特效？

<a class=xh href=http://www.77cn.com.cn>自由泳网</a>

由上可以看出，我们又用了一次CSS伪类，它的定义格式是：选择符.类选择符{属性;属性值}，例如前面提到的a.xh{TEXT-DECORATION:none}。

怎么样，是不是有点复杂？其实比较简单，容易理解。如果觉得复杂的话，只要学会例一就可以了。 四、超链接变色的方法与此同理，代码如下：

a {

color: #000000; //链接文字颜色

font-size: 12px; //链接字体大小

}

a:link {color: #000; text-decoration:none;} //是有连接的文字的颜色

a:visited {color: #000;text-decoration:none;} //访问过的链接颜色