1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <title>制作水平导航栏</title> 9 <style type="text/css"> 10 ul{ 11 list-style-type:none;/*无下划线*/ 12 13 } 14 a{ 15 display: block;/*记得把a标签设置成block块元素*/ 16 height:30px; 17 line-height:30px;/*文字正中间*/ 18 width: 100px; 19 float:left; 20 text-align:center; 21 /*text-indent: 5px;如果不想让文字居中，可以选着缩进*/ 22 } 23 ul a:link, ul a:visited { 24 font-size: 16px; 25 color: black; 26 text-decoration: none;/*超链接无下划线*/ 27 28 } 29 ul a:hover, ul a:active { 30 font-size: 16px; 31 background-color: #be3948; 32 text-decoration: none; 33 } 34 35 </style> 36 </head> 37 38 <body> 39 <h3>课程难度</h3> 40 <ul> 41 <li><a href="#">全部</a></li> 42 <li><a href="#">初中</a></li> 43 <li><a href="#">中级</a></li> 44 <li><a href="#">高级</a></li> 45 </ul> 46 </body> 47 </html>
原文：http://www.cnblogs.com/tankcang/p/6291342.html