简而言之就是，将导航的ul列表放在一个盒子里，然后导航栏置顶，设置透明度，设置z-index值

效果图如下：

页面代码：

body:

<!-- 系统导航部分 -->
        <div class="daohang">
        <ul class="nav">
          <li>
            <a target="_blank" href="https://www.baidu.com/"
              >物联网设备管理系统</a
            >
          </li>
          <li>
            <a target="_blank" href="https://www.baidu.com/"
              >数据交换系统</a
            >
          </li>
          <li>
            <a target="_blank" href="https://www.baidu.com/"
              >数据质量校验系统</a
            >
          </li>
         
          <li>
            <a target="_blank" href="https://www.baidu.com/"
              >大数据挖掘与分析系统</a
            >
          </li>
          <li>
            <a target="_blank" href="https://www.baidu.com/"
              >大数据可视化管理系统</a
            >
          </li>
        </ul>
        </div>

 css:

/* 导航栏 */
* {
  /* 
 重置样式表
  */
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
}
.nav {
  width: 1248px;
  height: 48px;
  /* background-color: #e3e8e3; */
  margin: auto auto;
  

}
.nav li {
  float: left;
  list-style-type: none;
  line-height: 50px;
}
.nav a {
  /* 
           把a改成块元素
           去除下划线
           */
  display: block;
  text-decoration: none;
  font-size: 17px;
  /* 
           将文字在父元素中垂直居中
           */

  padding: 0 20px;
  color: #0c0c0c;
}
.nav a:hover {
  background-color: burlywood;
}
.nav li:last-child a {
  padding: 0 41px 0 42px;
}
.daohang{
  position: fixed;
            height: 3rem;
            width: 100%;
            right: 0;
            top: 0;
            /* //一直将导航栏置于最顶层 */
            z-index: 999;
           /* //设置导航栏背景颜色 */ 
            background-color: rgb(236, 241, 236,0.5); 
            /* opacity: 0.4; */
            
}

总结：简而言之就是，导航栏置顶，设置透明度，设置z-index值，其中透明度设置可以用rgb（X，X，X，x）表示，最后一项在0-1之间取值，数字越小越透明，也可以使用opacity属性表示，取值也是0-1。