欢迎光临
我们一直在努力

网页菜单详解(3):样式修饰-网页设计,Dreamweaver

建站超值云服务器,限时71元/月

    美化主要表现在鼠标放到菜单上后(即鼠标悬停)的效果,这里首先介绍几个经常用到的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。

  来看下面这个例子:

&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p> <p><span class=style_normal onmouseover="this.classname=style_over" onmouseout="this.classname=style_normal"><br /> 鼠标移上来,通过classname属性改变这段文字的class,使文字颜色变成红色;<br /> 移走,又恢复原来的颜色。</span><br /> &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
  

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

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

 

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 网页菜单详解(3):样式修饰-网页设计,Dreamweaver
分享到: 更多 (0)

相关推荐

  • 暂无文章