CSS實現導航條圖片的翻轉菜單

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS實現導航條圖片的翻轉菜單

CSS實現導航條圖片的翻轉菜單

編輯：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="http://www.jztop.com">www.jztop.com</a></p> </body> </html>

上一頁:什麼是DOCTYPE 它對網頁起何作用？
下一頁:CSS實現當前頁的滑動門菜單效果方法

CSS進階教程

CSS常用信息速查手冊: 文字屬性標識符作用屬性值　　font-family: 定義文字類型，順序尋找，先找到的為選定
兼容IE6/IE7/IE8/FireFox的CSS: .color{background-color: #CC00FF; /*所有
網頁代碼實例:CSS制作淘寶導航交互的小三角箭頭: 沒事做了一個淘寶導航的小三角箭頭圖標，測試/支持環境：IE7+、Firefox8、chr

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章