本文主要分享了簡單導覽列的製作方法。具有一定的參考價值,下面跟著小編一起來看下吧
今天分享一下簡單導覽列的製作方法:
第一步:引入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> <p 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> </p> </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> <p 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> </p> </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;}