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

简介: 我们本节开始继续去搞 接口库的主题外观,开搞之前,我们先学习下边框彩色的css:border-image:linear-gradient(to right,#ff8cd0,#77a4cb,#ff8cd

这个是给border边框 改成彩色的css样式,颜色同样可以自行添加。先看下我们当前的接口库:

微信图片_20220707130904.png就像是个毛坯房对吧。


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

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

微信图片_20220707130916.png

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

image.png

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

image.png

效果如下:

微信图片_20220707130933.png

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

微信图片_20220707130938.png

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

比如用例库:

微信图片_20220707130945.png

微信图片_20220707130951.png

依次弄好剩余的即可。

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


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

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

微信图片_20220707130957.png

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

微信图片_20220707131002.png

然后是底部按钮组:(注意颜色要浅,以免喧宾夺主)

微信图片_20220707131008.pngimage.png

效果如下:

微信图片_20220707131019.png

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

相关文章
|
3天前
|
JSON JavaScript 测试技术
Postman接口测试工具详解
Postman接口测试工具详解
13 1
|
16小时前
|
传感器 数据采集 监控
LabVIEW电池管理系统测试平台
LabVIEW电池管理系统测试平台
10 4
|
16小时前
|
数据采集 测试技术
常见测试测量接口的比较:PXI、PXIe、PCI、VXI、GPIB、USB
常见测试测量接口的比较:PXI、PXIe、PCI、VXI、GPIB、USB
|
2天前
|
Devops jenkins 测试技术
如何在Visual Basic项目中实施单元测试以确保代码健壮性
【7月更文挑战第2天】本文探讨了如何在Visual Basic项目中实施单元测试以确保代码健壮性。单元测试基础包括验证代码单元的功能,促进重构和提高代码质量。MSTest、NUnit和xUnit是VB.NET的单元测试工具。遵循TDD原则,保持测试独立,关注单一功能,并确保快速执行。示例展示了如何为`Calculator`类的加法方法编写MSTest。持续集成与自动化测试工具如Jenkins和Azure DevOps辅助测试运行和代码质量检查。单元测试是提升软件质量和开发效率的关键实践,反映了良好的开发文化。
8 2
|
14小时前
测试时,请求方法一定要写对,写错照样出问题,Method Not Allowed 删除接口写错,注意Controller层中UserMapper中的写法,视频往后看看就能看到解决问题的方法了
测试时,请求方法一定要写对,写错照样出问题,Method Not Allowed 删除接口写错,注意Controller层中UserMapper中的写法,视频往后看看就能看到解决问题的方法了
|
1天前
|
JSON 数据格式
postman 实用教程(含带 token 访问需登录权限的接口、测试文件上传接口、测试文件下载接口)
postman 实用教程(含带 token 访问需登录权限的接口、测试文件上传接口、测试文件下载接口)
4 0
后端测试,编写好了一个接口,怎样用postman测试
后端测试,编写好了一个接口,怎样用postman测试
|
1天前
|
API 开发工具
支付系统23-------使用沙箱账号进行支付测试,统一收单并支付页面接口的调用
支付系统23-------使用沙箱账号进行支付测试,统一收单并支付页面接口的调用
|
1天前
|
传感器 存储 数据采集
LabVIEW阀性能测试平台
LabVIEW阀性能测试平台
|
2天前
|
Java 测试技术 开发者
Java中设计可测试的代码的最佳实践
Java中设计可测试的代码的最佳实践