您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> CSS样式表 >> 文章正文
[图文]给你的网页加上两种以上的文字链接效果         
给你的网页加上两种以上的文字链接效果
作者:佚名  文章来源:令狐设计  点击数:  更新时间:2005-6-14 23:43:17 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

很多人也许学会了怎样使链接文字随鼠标状态的改变而改变的做法,这是“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步的设置就可以轻松的搞定。

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:apoints    责任编辑:apoints  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    Dreamweaver超级技巧(中)
    Dreamweaver超级技巧(下)
    Dreamweaver滑动菜单的制作
    Dreamweaver MX应用表格排序
    Dreamweaver的技巧锦集17条
    Dreamweaver技巧大放送前六招
    使用Dreamweaver制作网页事如何使用库
    简单实用的网页表格特效
    DW MX实例:极酷的鼠标外观
    DW MX实例:个性化 IE 滚动条
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门