Web前端開發實戰4:導航菜單(一)
阿新 • • 發佈:2017-06-12
pan 解決 博文 xmlns 背景圖 20px mar 水平 經典
在前面的博文中我們提到橫向一級菜單,這裏我們來看看導航菜單。
導航菜單種類非常多,可是制作原理都是大同
小異的。這裏看的比二級下拉式菜單還簡單。
來看一些站點上的導航菜單:
垂直導航菜單:
水平導航菜單:
一垂直菜單
制作原理:(1)用無序列表構建菜單。(2)<a>標簽的設置:ul li a{display:block;}。
定義的關鍵是將<a>標簽設置為
塊元素。
代碼:
<!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"> /*CSS全局設置*/ *{ margin:0; padding:0; font-size:16px; font-family:"微軟雅黑"; } .nav{ height:200px; width:90px; margin-top:50px; margin-left:10px; } .nav ul{ list-style:none; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; /*設置的關鍵*/ display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-bottom:1px; } .nav li a:hover{ background-color:#FF6600; color:#FFFFFF; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">站點首頁</a></li> <li><a href="#">課程大廳</a></li> <li><a href="#">學習中心</a></li> <li><a href="#">經典案例</a></li> <li><a href="#">關於我們</a></li> </ul> </div> </body> </html>
效果展示:
初始化狀態或鼠標離開的狀態:
鼠標放上去的狀態:
二水平菜單
制作原理:在垂直菜單的基礎上,將li元素進行左浮動設置。因為li元素浮動脫離原來的文檔流會失去寬和高,因
此一定要在a元素上使用display:block屬性將其變為塊級元素,然後進行寬和高的設置。
僅僅改變CSS樣式代碼:
/*CSS全局設置*/ *{ margin:0; padding:0; font-size:16px; font-family:"微軟雅黑"; } .nav{ height:40px; margin-top:50px; margin-left:10px; } .nav ul{ list-style:none; } /*設置的關鍵*/ .nav li{ float:left; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-right:1px; } .nav li a:hover{ background-color:#FF6600; color:#FFFFFF; }
效果展示:
三圓角菜單
制作原理:在水平菜單的基礎上我們進行CSS圓角屬性的設置,可是IE6,7,8瀏覽器並不支持這個屬性,制作一定
要考慮瀏覽器的兼容性,在這裏我們使用圓角屬性。解決不兼容的方法就是我們能夠裁剪圓角背景圖作為每一個li元素
的背景就可以。
完整的代碼:
<!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"> /*CSS全局設置*/ *{ margin:0; padding:0; font-size:16px; font-family:"微軟雅黑"; } .nav{ height:50px; margin-top:20px; margin-left:10px; } .nav ul{ list-style:none; height:50px; border-bottom:10px solid #FF6600; padding-left:30px; } .nav li{ float:left; margin-top:10px; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-left:1px; /*設置圓角屬性,IE6,7,8不支持*/ border-top-left-radius:15px; border-top-right-radius:15px; } .nav li a:hover,.nav li a.on{ background-color:#FF6600; color:#FFFFFF; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a class="on" href="#">站點首頁</a></li> <li><a href="#">課程大廳</a></li> <li><a href="#">學習中心</a></li> <li><a href="#">經典案例</a></li> <li><a href="#">關於我們</a></li> </ul> </div> </body> </html>
效果展示:
初始化狀態或鼠標離開的狀態:
鼠標移上去的狀態:
Web前端開發實戰4:導航菜單(一)