1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>导航条</title> 6 <script type="text/javascript"> 7 8 </script> 9 10 <style type="text/css"> 11 *{ 12 margin: 0px; 13 padding: 0px; 14 } 15 /* 去除ul前的点*/ 16 .nav{ 17 list-style: none; 18 background-color: #6495ED; 19 width: 1000px; 20 margin: 50px auto; 21 /* 解决高度塌陷 22 在IE6中，如果为元素指定了一个宽度，则会默认开去hasLayout 23 */ 24 overflow: hidden; 25 } 26 .nav li{ 27 /* ul为设置li向左浮动 */ 28 float: left; 29 width: 25%; 30 } 31 .nav a{ 32 /* 33 为a指定一个宽度，但是a是内联元素，所以先要转换为块元素 34 */ 35 display: block; 36 width: 100%; 37 /* 设置文字居中 */ 38 text-align: center; 39 /* 设置上下内边距 */ 40 padding: 5px 0px; 41 /* 设置字体样式 去除下划线 */ 42 text-decoration: none; 43 /* 设置字体颜色 加粗 */ 44 color: white; 45 font-weight: bold; 46 } 47 .nav a:hover{ 48 /* 伪类 设置当鼠标点击时出现其他颜色 */ 49 background-color: #c00; 50 } 51 </style> 52 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 </ul> 62 </body> 63 </html>