织梦学习网,专业提供DEDECMS模板,DEDECMS教程,网页特效素材等建站资源!
当前位置:织梦学习网 > 网页设计 > DIV+CSS教程 > DIV CSS教程 >

CSS绿色导航菜单制作实例

整理编辑:织梦学习网 更新时间:2016-12-29 阅读:

   网站上的菜单大部分都是由CSS来实现的,不管是带动画效果,或是不带动画效果,不管是一级菜单或是多级菜单,不管是横向菜单,也不管是竖向菜单,几乎都与CSS关系密切。现在用CSS代码实战一款简洁的绿色导航菜单,是一个基本型菜单,没有使用jQuery,也没有加入动画效果,目的是让CSS新手学会如何制作一个简单的CSS菜单。

  先来帖CSS菜单的代码,为了便于理解,这里在关键的地方都加入了注释。

CSS绿色导航菜单制作实例

  CSS代码写好了,先保存为menu.css文件,下面要引入这个文件,将CSS应用到对像上,下面就是对网页上菜单对象的定义:

CSS绿色导航菜单制作实例

  好了,将上述页面保存为menu.html,与menu.css文件放在一起,双击运行menu.html,就可看到菜单效果啦,如下图所示:

CSS绿色导航菜单制作实例

转载请注明出处:http://www.dedexuexi.com/divcss/jc/1617.html

关键词: