CSS实现导航条图片的翻转菜单·百家电脑学院

　　如果用传统的方法制作这个翻转菜单，至少需要把图片切成10块，还要加上JS代码，在图片按钮上再加行为，现在完全用CSS来实现，图片只要一张，见下图：

　　 Navbg

　　CSS代码:

　　设计的更体贴，照顾纯文本浏览的朋友:

　　可以在LI内套入SPAN元素，加入文本链接，在风格中设SPAN不可见。

<!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" xml:lang="en" lang="en"> <head>  <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-152060-1"; urchinTracker(); </script>  <style type="text/css">    </style> </head> <body> <ul id="imgmenu"><li id="activeh"><a href="#"></a></li><li id="about"><a href="#"></a></li> <li id="pro"><a href="#"></a></li><li id="faq"><a href="#"></a></li> <li id="contact"><a href="#"></a></li></ul> <p>Back to<a href="">www.jztop.com</a></p> </body> </html>

[编辑：百家电脑学院] [返回学院首页] [返回上一页] []

·上一篇：什么是DOCTYPE 它对网页起何作用？ · 下一篇：CSS实现当前页的滑动门菜单效果方法

网站建设 > CSS/HTML

CSS实现导航条图片的翻转菜单

[2007-5-24 15:44:17] [来源: 百家电脑学院] [我要投稿]

·CSS实现导航条图片的翻转菜单 | 相关文章·

·百家学院 | 最新评论·