1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>CSSTest</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 .nav { 14 list-style: none; 15 background-color: #6495ed; 16 width: 1000px; 17 margin: 50px auto; 18 /*高度塌陷，子元素浮動*/ 19 overflow: hidden; 20 } 21 22 .nav li { 23 float: left; 24 /*為每個li指定一個寬度，雖然效果出來了，但是每個li 25 不具有超鏈接屬性,易用性不好，li是a的父元素，先給父元素一個 26 寬度值，再來設置a寬度 27 */ 28 width: 12.5%; 29 } 30 31 /*當鼠標移入時改變背景顏色*/ 32 .nav a:hover { 33 background-color: #c00; 34 } 35 36 a { 37 /**為a標簽指定一個寬度 38 a是一個內聯元素寬度失效，轉為塊元素*/ 39 display: inline-block; 40 width: 100%; 41 /*設置文字居中*/ 42 text-align:center; 43 /*設置一個上下內邊距*/ 44 padding: 5px 0; 45 /*去除下划線*/ 46 text-decoration: none; 47 /*字體顏色設置*/ 48 color: white; 49 /*字體加粗*/ 50 font-weight: bold; 51 } 52 </style> 53 </head> 54 <body> 55 <!-- 導航條練習 --> 56 <ul class="nav"> 57 <li><a href="">首頁</a></li> 58 <li><a href="">新聞</a></li> 59 <li><a href="">聯系</a></li> 60 <li><a href="">關於</a></li> 61 <li><a href="">首頁</a></li> 62 <li><a href="">新聞</a></li> 63 <li><a href="">聯系</a></li> 64 <li><a href="">關於</a></li> 65 </ul> 66 </body> 67 68 </html>