css 有弹动效果的网页导航

发了个韩国网站（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.0133.cn/upload/20091011190507833.gif">https://www.0133.cn/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.0133.cn/web/">网页制作</a></li><li><a href="https://www.0133.cn/flash/">Flash教程</a></li><li><a href="https://www.0133.cn/photoshop/">Photoshop教程</a></li><li><a href="https://www.0133.cn/">html中文网</a></li></ul></body></html>

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

以上就是css 有弹动效果的网页导航的详细内容，更多请关注0133技术站其它相关文章！