CSS绿色导航菜单制作实例

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

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

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

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

时间: 2024-10-01 20:56:38

CSS绿色导航菜单制作实例的相关文章

CSS横向导航菜单实例教程

CSS横向导航菜单实例教程2,又一款css导航菜单.   <ul id="nav">      <li><a href="http://www.alixixi.com/">Div+CSS教程</a></li>      <li><a href="http://www.alixixi.com/" id="current">CSS布局实例</

jQuery+CSS3实现四种应用广泛的导航条制作实例详解_jquery

导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航

用CSS创建导航菜单的两个例子

css|菜单|创建|导航 原创教程,转载请注明出处:网页教学网 用CSS创建导航菜单的两个例子 现在使用CSS+XHTML制作网页,通常网页需要导航,导航通常有两种:水平和垂直. 1.垂直导航的例子:(单击此处浏览演示效果) (1)CSS文件:(保存为vertical.css) h1, h2{font: normal 200%/100% Garamond, "宋体", serif;margin-bottom: 0px;color: #630;background: transparen

简单实用的FLASH导航菜单制作

菜单|导航 相信大家都对现在的FLASH导航情有独钟,但是对一些的FLASH特效望尘莫及(我就是其中一位:),特别是复杂的AS动作脚本.不过,通过自己的学习发现,一些很难理解的程序可以通过简单的AS动作脚本表现出同样的效果,今天我就来讲一个例子,可以让一些和我一样的FLASH的初学者(懂基础AS动作脚本程序的FLASHER)!希望大家有所体会,有所收获. 预览: 源文件下载 先来说说知名的<闪客帝国>的导航栏: 这种效果的导航栏在国内国外的例子很多的,很实用!只不过他们表现的形式不一样罢了,比

CSS实现分页效果制作实例

CSS实现分页效果制作实例,教程和代码如下:  这个教程要说明的是如何为搜索结果或更长记录列表设计分页.因为经常有人问我这个问题,所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式. 这个教程也包含有实现Flickr.Digg式的简洁分页样式的HTML/CSS代码,随时可以应用于你的WEB项目中. Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and

利用.net控件实现下拉导航菜单制作的具体方法

这篇文章介绍了利用.net控件实现下拉导航菜单制作的具体方法,有需要的朋友可以参考一下,希望对你有所帮助   今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接. 以下是我自己做的代码: 复制代码 代码如下:     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="10

漂亮CSS+DIV导航菜单代码

提示:您可以先修改部分代码再运行 漂亮CSS+DIV导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

超简单CSS+DIV导航菜单代码

提示:您可以先修改部分代码再运行 超简单CSS+DIV导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

韩国风格css横向导航菜单代码

提示:您可以先修改部分代码再运行 韩国风格css横向导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行