这个是给border边框 改成彩色的css样式,颜色同样可以自行添加。先看下我们当前的接口库:
就像是个毛坯房对吧。
先改顶部菜单中 接口库 这个按钮颜色吧,既然选中它,那么就让它炫酷一点!
打开P_apis.html,给接口库这个超链接a标签内加入样式:
然后是整个顶部菜单的边框:
然后再给顶部菜单的背景色变白并加入阴影:
效果如下:
注意,这里我们并没有采用 公共的顶部菜单,而是当时简单的进行复制多份,所以我们要把这几处变化,依次复制粘贴到 用例库/项目设置/全局变量。
当然,我们可以更简单的把整个顶部菜单进行复制,然后直接覆盖到其他三个页面来减少我们一个个修改的成本。不过要注意这个li 标签的 class="active",它表示当前哪个按钮正在点击状态。还有后面的style 都要跟着移动到对应的 li标签内:
比如用例库:
依次弄好剩余的即可。
你可能会觉得这样麻烦,其实我们很早之前可以利用 {% include %}的引入技术来实现会更简单,这里懂的小伙伴可以自行修改。
顶部菜单完成之后。就是具体接口的那五个按钮了。
为了凸显调试按钮,我们仍然是对其进行特殊颜色设置,其他几个按钮仍然无色,避免页面五颜六色过多,失去层次感。
注意上面画线的三处都要修改:
然后是底部按钮组:(注意颜色要浅,以免喧宾夺主)
效果如下:
再回头看看刚开始的样子是不是觉得 现在漂亮不少呢?大家也可以自己设计各种炫酷的主题哦~