css樣式之導航條(nav)
阿新 • • 發佈：2019-02-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*去掉ul的樣式*/ ul{ list-style:none; } /*去掉a標籤的下劃線*/ a{ text-decoration: none; } /*設定.nav的寬高、居中顯示、下邊框樣式*/ .nav{ width: 970px; height: 25px; margin: 0 auto; border-bottom: 2px solid #0266A3; } /*line-height: 25px;與父元素.nav的height一樣，使得li居中顯示*/ .nav li{ padding:0 15px 0 15px; line-height: 25px; float: left; font-size: 14px; font-weight: bold; } /*a標籤不能繼承父標籤的顏色，所以需要單獨設定a標籤中的字型顏色*/ .nav li a{ color: #0266A3; } /*當滑鼠移動到li標籤時，背景顏色變成#0266A3*/ .nav li:hover{ background-color:#0266A3 ; } /*當滑鼠移動到li標籤時，a標籤中的字型顏色變成#0266A3*/ .nav li:hover a{ color: white; } </style> </head> <body> <div class="nav"> <!--href="#":阻斷a標籤跳轉重新整理頁面--> <ul> <li><a href="#">首頁</a></li> <li><a href="#">百度</a></li> <li><a href="#">聯想</a></li> <li><a href="#">戴爾</a></li> </ul> </div> </body> </html>
ps: CSS中的background和background-color的區別
background可以定義背景的一切內容，包括顏色圖片，圖片位置
background：red 10px 5px; //設定背景顏色為紅色，x方向移動10，y方向5
background：url(path); //path為圖片的路徑
background-color只可以定義背景顏色