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>
来源：https://www.cnblogs.com/tankcang/p/6291342.html