今天分享一下簡單導航欄的制作方法：
第一步：引入css樣式表，新建一個id為nav的層，使用<ul>、<li>、<a>標簽來制作完成效果。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <div id="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>
第二步設置CSS樣式：
1.設置nav的屬性
#nav{ width: 500px; height: 50px; border: 1px solid red;}展示效果如下所示：
2.清除<ul>標簽前面自帶的點
#nav ul{ list-style: none;}3.設置<ul>下包含的<a>標簽的屬性
#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none;}4.設置鼠標滑過效果
#nav ul li a:hover{ background-color: #ABCDEF;}最終效果：
完整HTML代碼部分：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <div id="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>
完成CSS樣式代碼部分：
*{ margin: 0; padding: 0;}#nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px;}#nav ul{ list-style: none;}#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none;}#nav ul li a:hover{ background-color: #ABCDEF;}以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
