导航栏的制作

  1. 让列表横向
 <li style="float: left;">
     <a href="#">ABOUT</a>
</li>
  1. 干掉列表前的小黑点
<ul style="list-style: none;">
  1. 干掉ul的默认样式
<ul style="list-style: none; margin: 0; padding: 0;">
  1. border大法
style="border: 1px solid red;"
  1. 用float必有bug，修复bug的方法
    在css文件编写一个伪类
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

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

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

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


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

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




  4. 用截图工具测量距离


    平分到li标签的左右margin

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

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

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


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


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


    padding-top: 11px;
    padding-bottom: 11px;
  1. 让li标签包裹住a标签，给a标签加上display
display: block;
  1. 去掉a标签的下划线
text-decoration: none;
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容