1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>导航栏</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 ul{ 11 margin: 0 auto; 12 border: 3px lightblue solid; 13 width: 700px; 14 height: 50px; 15 cursor: pointer; 16 } 17 ul li{ 18 display: inline-block; 19 margin-right: 40px; 20 margin-top: 15px; 21 } 22 ul>li>a{ 23 font-size: 18px; 24 text-decoration: none; 25 color: darkmagenta; 26 } 27 ul>li>a:hover{ 28 color: cornflowerblue; 29 font-weight: bold; 30 } 31 </style> 32 </head> 33 <body> 34 <ul> 35 <li><a href="http://www.baidu.com">Node培训课程</a></li> 36 <li><a href="http://www.baidu.com">HTML5培训课程</a></li> 37 <li><a href="http://www.baidu.com">视频教程</a></li> 38 <li><a href="http://www.baidu.com">课件文档</a></li> 39 <li><a href="http://www.baidu.com">联系我们</a></li> 40 </ul> 41 </body> 42 </html>
实现效果如上图。