很多公司的官网，都是有一个始终在窗口最上端的导航栏，本人小白也是多次遇见这个问题，现在模仿了一个导航栏，希望可以帮助大家学习简单的导航栏。。。。。。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>简单导航栏学习</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style-type: none;
      }

      .top {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.6);
      }

      .menu {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
      }

      .logo {
        float: left;
        margin-top: 9px;
      }

      .logo a {
        display: inline-block;
        width: 32px;
        height: 32px;
        background-image: url("http://temp.im/32x32/4CD964/fff");
        background-size: 32px 32px;
      }

      .nav {
        float: right;
        margin-top: 10px;
        font-size: 0;
      }

      .nav li {
        display: inline-block;
        margin-left: 40px;
      }

      .nav a {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #fff;
        text-decoration: none;
      }

      .nav a:hover {
        color: #83c3f3;
      }
    </style>
  </head>

  <body>
    <div class="top">
      <div class="menu">
        <h1 class="logo"><a href="http://www.dowebok.com/"></a></h1>
        <ul class="nav">
          <li>
            <a href="javascript:">首页</a>
          </li>
          <li>
            <a href="javascript:">产品</a>
          </li>
          <li>
            <a href="javascript:">技术</a>
          </li>
          <li>
            <a href="javascript:">渠道</a>
          </li>
          <li>
            <a href="javascript:">论坛</a>
          </li>
          <li>
            <a href="javascript:">关于我们</a>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>

效果图如下：

常用导航栏代码_官网

​