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>