网站首页 工具软件 操作系统 办公软件 网页制作 PHP教程 script脚本专栏 photoshop教程 其他精品教程
我发布的文章 - 教程搜索 - 交流论坛 - 帮助中心 - 网站首页 网络工具 - 常用工具 - 媒体工具 - 系统工具 - 实用工具 NT/2003 - Win Xp - Win2000 - DOS/Win9x - IE/注册表 - Linux - 苹 果 Office - Word - Excel - PowerPoint - 输入法 - 邮件处理 Flash - Dreamweaver - Fireworks - FrontPage - HTMLCSS 基础文章 - PHP函数 - PHP技巧 - 数据库相关 - 高级应用 - PHP安装 - 转载精华 - 常见问题 综 合 类 - 状 态 栏 - 游 戏 类 - 页面背景 - 页面特效 - 页面导航 - 文本操作 - 文本特效 - 图形特效 - 鼠标特效 - 时间日期 - 密 码 类 文字特效 - 按钮与图标 - 色彩运用 - 滤镜魔法 - 综合实例 XML教程 - DELPHI基础教程 - VB教程
首页 -> 网页制作 -> HTMLCSS

TOP

给你的网页加上两种以上的文字链接效果
文章内容
相关信息
用户评论
文章内容
    很多人也许学会了怎样使链接文字随鼠标点击状态改变而改变的效果,这是css的使用效果,也许你只懂得设置一种状态,比如鼠标放在文字上方,文字变为红色。但这样是整个页面都是如此的统一效果,但有没办法在一个页面中有多种效果呢?比如页面中有两个文字链接,我们想其中一个当鼠标放上去的时候是红色,另一个则是黄色。答案是肯定的。如果手写代码,也只是几行而已。考虑到现在大多数人都在使用Dreamweaver,下面我们以在Dreamweaver4中谈谈如何做这种效果。

   1:打开Dreamweaver,新建一文件,做两个带链接的文字。 
   2:SHIFT+F11,打开css styles控制面板,新建一use css selector,需要注意的是,你选择Use css selector再选择a:hover,并没有出现上图的效果,其实技巧就是在这里!我们手动把a:hove改成a.one:hove,也就是在a的后面加上一个点与名字(可任意英文,不能是数字)。设置好后点ok
   3:在弹出的style definition for one.a:hover面板中设置你要的效果,这里我们选择字体的颜色为红色。设置完后点ok
   4:重复第2、3步,第2步需要修改的地方就是把a.one:hover该回a:hover(就是直接选中a:hover就可。第3步需要改的就是字体的颜色了,我们设置为黄色。 
   5:现在预览还没有效果,我们还需要动点小手术,我们来看看设置完后的css styles控制面板,如下图,里面会出现个one
   6:在页面中选中其中你想要当鼠标放上去的时候是红色的链接文字,再在css styles控制面板中用鼠标选中one
   7:现在你的页面已经有两种效果了。
   总结:按照以上逻辑,我们可以做出无限个文字链接效果,关键是在于a:hover a:active a:link a:visited的修改而已,前面介绍的只是a:hover,其实其他三个一样可以。只要参照第2步的设置就可以轻松的搞定。


相关信息
给你的网页加上两种以上的文字链接效果
发布者:lfj
浏览量:144
发布日期:2005-03-08 13:37:49
所属专题:
用户评论
称  呼:
内  容:

广告位

广告招租,欢迎抢订

热门信息

·从HTML语言到网上家园 第一..
·从HTML语言到网上家园 第二..
·从HTML语言到网上家园 序章
·从HTML语言到网上家园 第三..
·从HTML语言到网上家园 第五章
·HTML:让网页超链接拥有多..
·个人网站制作全接触(中)
·个人网站制作全接触(下)

推荐信息