首页 > 代码库 > 制作水平导航栏

制作水平导航栏

2024-09-01 08:49:41   210人阅读

 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>

 

制作水平导航栏


联系
我们