蓝色布局的头部导航颜色渐变色

要实现蓝色布局的头部导航颜色渐变色，可以通过 CSS 的线性渐变（linear-gradient）实现。以下是一个简单的例子：

HTML 代码：

<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

CSS 代码：

.nav {
  background: linear-gradient(to right, #3c8dbc, #4a89dc);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav li {
  margin-right: 20px;
}

.nav li:last-child {
  margin-right: 0;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}

在上面的代码中，`.nav` 元素使用了 `linear-gradient` 来设置背景渐变色。其中，`to right` 表示渐变方向为从左到右，`#3c8dbc` 和 `#4a89dc` 分别表示起点和终点的颜色。你可以根据需要自行调整颜色值和渐变方向。