手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>Dreamweaver>列表

DreamweaverMX2004实现一个页面两种连接风格

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

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

  1、首先启动Dreamweaver MX 2004,然后新建一个HTML文档,做两个带连接的文字。

  2、按SHIFT F11,打开css styles控制面板,新建一css样式,需要注意的是,您选择器类型为:高级(ID、上下文选择器等),再选择选择器a:hover,并没有出现上图的效果,其实技巧就是在这里!我们手动把a:hove改成a.one:hove,也就是在a的后面加上一个点和名字(可任意英文,不能是数字)。配置好后点确定。如下图:

  

  

  

  



  3:在弹出的a。one:hover 的 CSS 样式定义对话框中配置您要的效果,这里我们选择字体的颜色为红色。配置完后点“确定”。如下图:

  

  



  4、重复第2、3步,第2步需要修改的地方就是把a.one:hover该回a:hover(就是直接选中a:hover就可。第3步需要改的就是字体的颜色了,我们配置为黄色。

  



  5、现在预览还没有效果,我们还需要动点小手术,我们来看看配置完后的css styles控制面板,如下图:

  

  



  6、在页面中选中其中您想要当鼠标放上去的时候是红色的链接文字,再在CSS样式面板中用鼠标右击a.one:hover,然后选择“套用”。如下图:

  

  



  7:现在预览您的页面就已有两种效果了。

  



  总结:按照以上逻辑,我们能够做出无限个文字链接效果,关键是在于a:hover a:active a:link a:visited的修改而已,前面介绍的只是a:hover,其实其他三个相同能够。只要参照第2步的配置就能够轻松的搞定。最后嘱咐大家一句,我们制作网页不能只学会设计工具(Dreamweaver等设计软件)就算学会了网页制作了,关键是大家必须懂得代码。这时我们能够打开“代码视图”看看效果:

  

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!