html—導航條
阿新 • • 發佈：2020-07-14
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航條</title> <style type="text/css"> /* 清除預設樣式 */ * { margin: 0; padding: 0; } /*設定ul*/ .nav { /*去除專案符號*/ list-style: none; /*為u1設定一個背景顏色*/ background-color: #6495ed; /* 設定一個寬度 */ /* 在IE6中，如果為元素指定了一個寬度，則會預設開啟hasLayout */ width: 1000px; /* 設定元素居中 */ margin: 50px auto; /* 解決高度塌陷 */ overflow: hidden; } /* 設定li */ .nav li { /* 設定li向左浮動 */ float: left; /* 為li指定一個寬度 width: 25%; */ width: 25%; } .nav a { /* 將a轉換成塊元素 */ display: block; /*為a指定一個寬度 */ width: 100%; /* 設定文字居中 */ text-align: center; /* 設定一個上下內邊距 */ padding: 5px 0; /* 去除下劃線 */ text-decoration: none; /* 設定字型顏色 */ color: white; /* 設定加粗 */ font-weight: bold; } /* 設定a滑鼠移入的效果 */ .nav a :hover { background-color: #cc0000; } </style> </head> <body> <!--建立導航條的結構--> <ul class="nav"> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">聯絡</a></li> <li><a href="#">關於</a></li> </ul> </body> </html>