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

效果图如下：

页面代码：

body:

<!-- 系统导航部分 --><div class="daohang"><ul class="nav"><li><a target="_blank" href="/">物联网设备管理系统</a></li><li><a target="_blank" href="/">数据交换系统</a></li><li><a target="_blank" href="/">数据质量校验系统</a></li><li><a target="_blank" href="/">大数据挖掘与分析系统</a></li><li><a target="_blank" href="/">大数据可视化管理系统</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。