css 有弹动效果的网页导航

更新时间：2009年10月11日 19:04:56 作者：

发了个韩国网站（www.firstkids.co.kr）给我，让我用CSS写一个类似这个网站的导航栏效果。思路是：背景图像定位！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>这是一个导航</title> <style type="text/css"> #nav{ list-style:none; margin:0; padding:5px 0 0 0; background:#F0F0F0; } #nav li{ float:left; display:inline; margin-right:2px; } #nav a{ float:left; width:81px; height:28px; text-align:center; background:url(<A href="https://www.jb51.net/upload/20091011190507833.gif">https://www.jb51.net/upload/20091011190507833.gif</A>) no-repeat 0 -4px #F3602A; font:12px/24px '宋体'; color:#FFF; text-decoration:none; } #nav a:hover{ line-height:28px; background-position:0; } </style> </head> <body> <ul id="nav"> <li><a href="https://www.jb51.net/web/">网页制作</a></li> <li><a href="https://www.jb51.net/flash/">Flash教程</a></li> <li><a href="https://www.jb51.net/photoshop/">Photoshop教程</a></li> <li><a href="https://www.jb51.net/">脚本之家</a></li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

几个不错的自动收缩菜单导航效果
几个不错的自动收缩菜单导航效果...
2007-10-10
javascript渐变显示的雅虎中国选项卡效果代码
javascript渐变显示的雅虎中国选项卡效果代码...
2007-10-10
css+js下拉菜单
js+css实现的简单的下来菜单。兼容性好。
2009-05-05
javascript 静态树菜单实现代码
coding这么多年，我居然不知道有"dl"这种html标记，惭愧啊，今天偶然发现，觉得好玩，如是我为它添加了折叠功能，变成了一颗静态树.
2010-12-12
超级susymenu实现top菜单
超级susymenu实现top菜单...
2007-09-09
可以媲美Flash的JS导航菜单
可以媲美Flash的JS导航菜单...
2007-03-03
超个性的导航效果
超个性的导航效果...
2007-11-11
通用的二级菜单代码(css+javascript)
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。
2009-07-07
CSS JavaScript 实现菜单功能改进版
通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
鼠标经过导航菜单时颜色改变效果
鼠标经过导航菜单的时候，颜色改变，可自定义颜色。
2010-07-07

css 有弹动效果的网页导航

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具