网页菜单详解(3):样式修饰

作者:佚名 来源:中国教程网 点击: 日期:2007-04-02

美化主要表现在鼠标放到菜单上后（即鼠标悬停）的效果，这里首先介绍几个经常用到的属性：

　　background-color：背景色，其值为一个颜色值，如“#FF0000”、“red”。

　　border：边框样式，一个形如“宽度样式颜色”的字符串，如“1px solid red”，即1px的红色实线边框。

　　cursor：鼠标指针样式，取值为表示鼠标指针样式的字符串，如“hand”、“help”，即小手、帮助状态。

　　以上只是简单的介绍了几个在此类菜单中非常常见的属性，这里也并未做很详尽的解释（毕竟这些并不是我们要讲解的重点），欲了解更多可参阅相关资料。笔者在这里想说的是：掌握更多的属性会对你有所帮助。

　　前面说了，美化主要表现在鼠标放到菜单上后的效果，那么如何用Script来控制样式的变化呢？或者你会想到前面讲过的style对象，的确，用style可以达到目的，但是，很多时候，需要改变很多个属性，用style就显得有些麻烦。我们再来介绍一个新的属性：className。

　　className属性对应的就是的class，也即所谓的伪类，比如在某个标记中设置class=myName，那么这时该元素的className属性就是myName。 AOE3 STUDIO

　　来看下面这个例子： --------------------------------------------<style type="text/css">.style_normal { color: gray; }.style_over { color: red; }</style><span class=style_normal onmouseover="this.className='style_over'"onmouseout="this.className='style_normal'">鼠标移上来，通过className属性改变这段文字的class，使文字颜色变成红色；移走，又恢复原来的颜色。</span>----------------------------------------------
　　

　　我们看到，在处理相对复杂的样式变化的情况下，用className就方便得多了，至于样式如何变化，就变成如何定义class的问题了。

　　讲到这里，我想有一定基础的朋友应该已经清楚如何来修饰这个菜单了，即便你对了解的还不多，前面已经介绍了几个较常用的属性。所以，这里就不再多讲了。

　

edu4u.com.cn

中国教育网

AOE3 STUDIO

www.edu-cn.com

【文章评论】【收藏本文】【推荐好友】【打印本文】【论坛讨论】

最新文章:

·Dreamweaver制作网页幻灯片效果(04-02)	·Dreamwaver 常见问答解答(04-02)
·Dreamweaver快捷键大全(04-02)	·简单实用的网页表格特效(04-02)
·CourseBuilder For Dreamweaver 3 (1(04-02)	·网页瘦身小技巧---“分割大法”(04-02)
·DHTML实例解析:用HTC统一定制表单样(04-02)	·CourseBuilder For Dreamweaver 3 (3(04-02)
·Dreamweaver技巧50问(04-02)	·Dreamweaver技巧十二招(04-02)

·为你的网页添加背景音乐	·网页色彩搭配内涵
·网站更新短平快	·用代码“写”出扫描线效果图片
·十“问”DreamWeaver	·DHTML实例解析:用HTC统一定制表单样式
·快速图片链接批处理	·网页瘦身小技巧---“分割大法”
·为你的站点定做颜色	·简单实用的网页表格特效

文章评论:(0条)

用户名：（新注册）密码：匿名评论

评论内容：(不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。

§最新评论：

责任编辑:中国教程网