1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>css 无序列表 导航</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 9 <script src="main.js"></script> 10
11 <style> 12 * {
13 margin: 0px;
14 padding: 0px;
15 }
16 .level{
17 /*去掉无序列表前面黑点效果*/
18 list-style-type: none;
19
20 background-color: wheat;
21 width: 50px;
22 text-align: center;
23 }
24 a:link,a:visited {
25 /*去掉a标签链接的下划线的效果*/
26 text-decoration: none;
27 }
28
29 .vertical li {
30 display: inline;
31 }
32 </style> 33
34 </head> 35 <body> 36 <p>水平导航</p> 37 <ul class="level"> 38 <li><a href="#">导航1</a></li> 39 <li><a href="#">导航2</a></li> 40 <li><a href="#">导航3</a></li> 41 </ul> 42 <hr/> 43 <p>垂直导航</p> 44 <ul class="vertical"> 45 <li><a href="#">导航1</a></li> 46 <li><a href="#">导航2</a></li> 47 <li><a href="#">导航3</a></li> 48 </ul> 49 </body> 50 </html>
ul {
list-style-type: none;
}
a:link,a:visited {
/*去掉a标签链接的下划线的效果*/
text-decoration: none;
}
