dreamweaver技巧之设计彩色文字链接示例

当您将鼠标悬停在文本上时，您会观察到一系列引人入胜的样式变化。这些变化让文本呈现出与众不同的风采，比如下划线的消失、文字的闪动等。当与其他样式属性相结合，更能创造出如按钮般的文字链接效果，这种视觉效果如图所示。

如何实现这样的效果呢？以下是详细的操作步骤：

我们来到链接样式的初步设置阶段。在CSS样式定义设置对话框的“类型”子选项中，有五种修饰类型供我们选择。这五种修饰类型将为我们提供多种初级链接样式。我们可以根据需求轻松选择，以“无下划线”设置为例进行说明，其他样式的设置方法与此类似。

步骤一：创建CSS样式表文件。要开启这一旅程，只需按下Shift+F11键打开CSS样式面板。单击【新建样式】按钮后，在弹出的【新建CSS样式】对话框中，选择【高级（ID，上下文选择器等）】选项。接着，在选择器下拉菜单中选择【a:link】，然后点击【确定】按钮，如图示一所示。

接下来，进入编辑样式环节。在保存样式表文件（文件名为css.css）后，我们可以开始设定样式。为了达成无下划线的默认链接样式，我们将字体设定为宋体12pt，其余的色彩等参数则保持默认，如图示三所示。

我们新建并设置样式“.t1”。再次单击【新建样式】按钮，在对话框中选择【类（可应用于任何标签）】选项，以定义自己的样式类。然后，设置名称为“.t1”。（在【名称】文本框中，您可以根据需求填写任意名称，只要遵循“.”的格式即可。）选择【定义在css.css】后，一切设置完毕，单击【确定】。接下来的设置与第二步操作相同，完成后同样单击【确定】，如图示四所示。

这样一来，您就成功地为文本创建了独特的鼠标悬停效果。当您将鼠标移至文本上方时，将会呈现出先前设定的样式变化，为网页增添一抹亮色。无论是下划线的消失，还是文字的闪动，都能为用户的浏览体验增添一份趣味与吸引力。