范仁义css3课程---16、导航栏小实例

一、总结

一句话总结：

导航一般是用列表来做的，比如ul和li，主要是通过display:inline;将li由块状元素变成了行内元素。

二、导航栏小实例

博客对应课程的视频位置：16、导航栏小实例
https://www.fanrenyi.com/video/10/47

做一个基础版的小实例

导航一般是用列表来做的，比如ul和li，主要是通过display:inline;将li由块状元素变成了行内元素。

不熟悉的样式可以检查代码之后看看别人的样式

三、课程代码

 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         .header{
11             background-color: #605ca8;
12             height: 50px;
13         }
14         .header nav{
15             height: 100%;
16         }
17         .header nav ul{
18             height: 100%;
19             margin: 0;
20         }
21         .header li{
22             height: 100%;
23             list-style: none;
24             display: inline-block;
25         }
26         .header li a{
27             color: #fff;
28             text-decoration: none;
29             display: inline-block;
30             padding: 15px;
31             height: 20px;
32             line-height: 20px;
33         }
34     </style>
35 </head>
36 <body>
37     <div>
38         <header class="header">
39             <nav>
40                 <ul>
41                     <li>
42                         <a href="">课程</a>
43                     </li>
44                     <li>
45                         <a href="">个人中心</a>
46                     </li>
47                     <li>
48                         <a href="">刷题</a>
49                     </li>
50                 </ul>
51             </nav>
52         </header>
53     </div>
54 </body>
55 </html>