网页菜单详解之样式修饰

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

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

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

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

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

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

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

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

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有