css導航條的設計
阿新 • • 發佈：2020-11-16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="./reset.css"> 7 <style> 8 /*設定nav的大小*/ 9 .nav{ 10 width:1210px; 11 height:48px; 12 background-color:#E8E7E3; 13 margin:100px auto; 14 } 15 /*設定nav中的li*/ 16 17 .nav li{ 18 /*設定li設定浮動，使其橫向擺列*/ 19 float:left; 20 /*設定Li的高度*/ 21 /*將文字在父元素中居中*/ 22 line-height:48px; 23 24 } 25 26 /*設定a的樣式*/ 27 .nav a{ 28 /*將a轉化為塊元素*/ 29 display:block; 30 text-decoration:none; 31 color:#777; 32 font-size:18px; 33 padding:0 40px; 34 35 } 36 /*設定滑鼠移入的效果*/ 37 .nav a:hover{ 38 background-color:#3F3F3F; 39 color:#E8E7E3; 40 41 } 42 43 </style> 44 </head> 45 <body> 46 <ul class="nav"> 47 <li><a href="#">HTML/CSS</a></li> 48 <li><a href="#">Browser Side</a></li> 49 <li><a href="#">Server Side</a></li> 50 <li><a href="#">Programming</a></li> 51 <li><a href="#">XML</a></li> 52 <li><a href="#">Web Building</a></li> 53 <li><a href="#">Reference</a></li> 54 </ul> 55 </body> 56 </html>
顯示效果