這次給大家帶來CSS實現一級導覽列,CSS實現一級導覽列的注意事項有哪些,下面就是實戰案例,一起來看一下。
第一步:引入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;}
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
CSS3中nth-child與nth-of-type的區別以及提示
css3的新屬性box-sizing詳解
CSS畫出紅色愛心