css制作的有弹动效果的网页导航

http://www.itjxue.com 2015-08-05 00:19 来源:未知 点击次数:

发了个韩国网站（www.firstkids.co.kr）给我，让我用CSS写一个类似这个网站的导航栏效果。

思路是：背景图像定位！

<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'>html</a> 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(http://www.itjxue.com/files/091011/1_130617.gif) 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="http://www.itjxue.com/web/"><a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=+++%C' target='_blank'>网页</a>制作</a></li> <li><a href="http://www.itjxue.com/flash/"><a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=Flash' target='_blank'>Flash</a>教程</a></li> <li><a href="http://www.itjxue.com/photoshop/"><a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=photo' target='_blank'>Photoshop</a>教程</a></li> <li><a href="http://www.itjxue.com/">IT<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=%BD%C' target='_blank'>教学网</a></a></li> </ul> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：网页特效代码:纯css下拉菜单列表

下一篇：CSS+div和JS制作的网页滑动门特效代码

css制作的有弹动效果的网页导航

(责任编辑：IT教学网)

相关网页文字特效文章

阅读排行

专题教程

推荐网页文字特效文章

最新更新网页文字特效