网页菜单详解(3):样式修饰_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

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

作者：闵涛文章来源：闵涛的学习笔记点击数：698 更新时间：2009/4/23 12:16:18

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

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

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

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

　

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程：简单实用的网页表格特效

下一篇教程：网页菜单详解(2):初步实现

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……