1、垂直导航栏
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>导航栏</title> 6 <link href="style9.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <ul> 10 <li><a href="#">导航1</a></li> 11 <li><a href="#">导航2</a></li> 12 <li><a href="#">导航3</a></li> 13 <li><a href="#">导航4</a></li> 14 </ul> 15 </body> 16 </html>
css：
1 ul{ 2 list-style-type: none;/*去掉前面的实心圆*/ 3 margin:0px; 4 padding:0px; 5 } 6 a:link,a:visited{/*去掉下滑线*/ 7 text-decoration: none; 8 display:block; 9 background-color: burlywood; 10 color:aliceblue; 11 100px; 12 text-align: center; 13 } 14 a:active,a:hover {/*鼠标放上去的设置*/ 15 background-color: red; 16 }
效果：
2、水平导航栏
css代码：
1 ul{ 2 list-style-type: none;/*去掉前面的实心圆*/ 3 margin:0px; 4 padding:0px; 5 background-color: burlywood; 6 460px; 7 text-align:center; 8 } 9 a:link,a:visited{/*去掉下滑线*/ 10 text-decoration: none; 11 background-color: burlywood; 12 color:aliceblue; 13 100px; 14 text-align: center; 15 } 16 a:active,a:hover {/*鼠标放上去的设置*/ 17 background-color: red; 18 } 19 li{ 20 display:inline;/*水平摆放*/ 21 padding:3px ; 22 padding-left:5px; 23 padding-right:5px; 24 }