导航栏的编写

作者：@生活在北极的企鹅
本文为作者原创，转载请注明出处：https://www.cnblogs.com/BJQE/p/16045190.html

---

这是HTML文件内容

<nav id="navbar">
  <div class="container">
    <h1><a href="index.html">小郑在线教学</a></h1>
     <ul>
       <li><a class="current" href="index.html">首页</a></li>
       <li><a href="about.html">关于我们</a></li>
       <li><a href="contact.html">联系我们</a></li>
     </ul>
  </div>
</nav>

这是css文件内容

#navbar{
  background: #333;
  color: #fff;
  overflow: auto;
}
#navbar a{
  color: #fff;
}
#navbar h1{
  float: left;
  padding-top: 20px;
}
#navbar ul{
  float: right;
  list-style: none;
}
#navbar ul li{
  float: left;
}
#navbar ul li a{
  display: block;
  padding: 20px;
  text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current{
  background-color: #444;
  color: #f7c08a;

}

这是运行样式结果