e人网络文章更新系统--网页两种以上的文字链接效果-css效果

标题： 网页两种以上的文字链接效果

来源：不详

查看评论(5条)更新日期：2003-12-20

浏览量：1636

很多人也许学会了怎样使链接文字随鼠标状态的改变而改变的做法，这是“css”做出的效果。但也许你只懂得设置一种状态，比如鼠标放在文字上方，文字变为红色。如果整个页面都是如此的“统一”，是不是很枯燥呢？有没办法在一个页面中有多种文字链接的效果呢？比如页面中有两个文字链接，我们想其中一个当鼠标放上去的时候是红色，另一个则是蓝色的。

答案是肯定的，如果手写代码，也只是几行而已，但考虑到现在大多数人都在使用Dreamweaver，下面我们以Dreamweaver MX为工具，谈谈如何做这种效果。

1.在DreamweaverMX中，打开你要做多种链接效果的页面。

2.打开“css styles（CSS 样式）”面板，新建一个CSS样式，设置如下图：

需要注意的是，你选择“Use css selector（使用CSS选择器）”再选择“a:hover（链接翻转）”，并没有出现上图的效果，其实技巧就是在这里！我们手动把“a:hove”改成“a.one:hove”，也就是在“a”的后面加上一个“.”与名字（可是任意英文或数字）。设置好后点“OK（确定）”。

3.在弹出的“style definition for a.one:hover（a.one:hover的CSS样式定义）”对话框中设置你要的效果，这里我们选择文字的颜色为红色。设置完后点“OK（确定）”。

4.重复第2、3步，第2步需要修改的地方是把“a.one:hover”改为“a.two:hover”（这回“.”后的名字不要与“one”相同）。第3步需要改的就是字体的颜色了，我们设置为蓝色。

5.现在预览还没有效果，我们还需看看设置完后的“css styles（CSS 样式）”控制面板，里面会出现一个“one”和一个“two”。

6.在页面中选中其中你想要当鼠标放上去的时候是红色的链接文字，再在“css styles（CSS 样式）”控制面板中用鼠标选中“one”，然后在文档窗口中选中当鼠标放上去的时候是蓝色的链接文字，再在“css styles（CSS 样式）”控制面板中用鼠标选中“two”。

7.现在你的页面已经有两种效果了。

注意：如果你浏览时只有一个文字成功或都没有成功，请在代码视图下把两个文字前的“ class="one"”和“ class="two"”分别剪切到文字前的“<a”后即可。

总结：按照以上逻辑，我们可以做出无限个文字链接效果，关键是在于“a:hover”、“a:active”、“a:link”、“a:visited”的修改而已，前面介绍的只是“a:hover”，其他三个一样可以。只要参照第2步的设置就可以轻松的搞定。