HTML与CSS之导航栏 

 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>
View Code

实现效果如上图。

posted @ 2018-08-03 10:54  小仙女63  阅读(253)  评论(0)  编辑  收藏  举报