接口测试平台代码实现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

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

相关文章
|
1月前
|
数据采集 机器学习/深度学习 大数据
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
这篇文章详细介绍了C3D架构在行为检测领域的应用,包括训练和测试步骤,使用UCF101数据集进行演示。
44 1
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
|
1月前
|
机器学习/深度学习 人工智能 监控
提升软件质量的关键路径:高效测试策略与实践在软件开发的宇宙中,每一行代码都如同星辰般璀璨,而将这些星辰编织成星系的过程,则依赖于严谨而高效的测试策略。本文将引领读者探索软件测试的奥秘,揭示如何通过精心设计的测试方案,不仅提升软件的性能与稳定性,还能加速产品上市的步伐,最终实现质量与效率的双重飞跃。
在软件工程的浩瀚星海中,测试不仅是发现缺陷的放大镜,更是保障软件质量的坚固防线。本文旨在探讨一种高效且创新的软件测试策略框架,它融合了传统方法的精髓与现代技术的突破,旨在为软件开发团队提供一套系统化、可执行性强的测试指引。我们将从测试规划的起点出发,沿着测试设计、执行、反馈再到持续优化的轨迹,逐步展开论述。每一步都强调实用性与前瞻性相结合,确保测试活动能够紧跟软件开发的步伐,及时适应变化,有效应对各种挑战。
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
5天前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
11天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
42 3
|
14天前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
65 1
|
1月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
49 2
|
14天前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
40 0
|
1月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
63 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
Java C++
代码文件间重复性测试
本文介绍了如何使用代码相似性检测工具simian来找出代码文件中的重复行,并通过示例指令展示了如何将检测结果输出到指定的文本文件中。
下一篇
无影云桌面