导航栏的制作

1. 让列表横向

 <li style="float: left;">
     <a href="#">ABOUT</a>
</li>

2. 干掉列表前的小黑点

<ul style="list-style: none;">

3. 干掉ul的默认样式

<ul style="list-style: none; margin: 0; padding: 0;">

4. border大法

style="border: 1px solid red;"

5. 用float必有bug，修复bug的方法
   在css文件编写一个伪类

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

给所有子元素的父亲添加clearfix类

<ul class="clearfix"></ul>

6. 内联样式改为css文件外联

   
   

7. 用QQ或微信截图工具计算大小和查看RGB色值，用snipaste更方便

8. 开发者工具查看字体大小和色值

   
   
   
   

9. 用截图工具测量距离
   

   
   平分到li标签的左右margin
   

10. 将竖向变横向，并且分左右

子标签都加上float样式，分left和right，父标签加上clearfix类

11. 用开发者工具强制a标签处于hover状态

    
    

12. 加边框：先都加上透明边框，再加上hover边框

    
    

13. 增加a标签和border之间的距离

    
    

    padding-top: 11px;
    padding-bottom: 11px;

14. 让li标签包裹住a标签，给a标签加上display
    

display: block;

15. 去掉a标签的下划线

text-decoration: none;