接口测试平台代码实现144: 平台主题-夏日清凉3

我们本节开始继续去搞 接口库的主题外观，开搞之前，我们先学习下边框彩色的css：

border-image:linear-gradient(to right,#ff8cd0,#77a4cb,#ff8cd0,#fff5d3) 1 10;

这个是给border边框 改成彩色的css样式，颜色同样可以自行添加。

先看下我们当前的接口库：

就像是个毛坯房对吧。

先改顶部菜单中 接口库 这个按钮颜色吧，既然选中它，那么就让它炫酷一点！

打开P_apis.html,给接口库这个超链接a标签内加入样式：

然后是整个顶部菜单的边框：

然后再给顶部菜单的背景色变白并加入阴影：

效果如下：

注意，这里我们并没有采用 公共的顶部菜单，而是当时简单的进行复制多份，所以我们要把这几处变化，依次复制粘贴到 用例库/项目设置/全局变量。

当然，我们可以更简单的把整个顶部菜单进行复制，然后直接覆盖到其他三个页面来减少我们一个个修改的成本。不过要注意这个li 标签的 class="active"，它表示当前哪个按钮正在点击状态。还有后面的style 都要跟着移动到对应的 li标签内：

比如用例库：

依次弄好剩余的即可。

你可能会觉得这样麻烦，其实我们很早之前可以利用 {% include %}的引入技术来实现会更简单，这里懂的小伙伴可以自行修改。

顶部菜单完成之后。就是具体接口的那五个按钮了。

为了凸显调试按钮，我们仍然是对其进行特殊颜色设置，其他几个按钮仍然无色，避免页面五颜六色过多，失去层次感。

注意上面画线的三处都要修改：

然后是底部按钮组：（注意颜色要浅，以免喧宾夺主）

效果如下：

再回头看看刚开始的样子是不是觉得 现在漂亮不少呢？大家也可以自己设计各种炫酷的主题哦～

下节课内容我们去改用例库吧～