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

简介: 最近迷恋上了 幻彩-渐变-淡蓝浅粉珍珠白-青春无敌霹雳少女系列 的相关主题。所以抽一节文章,给大家改一改主题颜色,也让大家了解这个要怎么改。

首先要明确俩个css技术:

  1. 背景渐变/边框渐变
  2. 动态渐变


我们先打开主页html 即 Home.html。先来记住之前的样子吧:

微信图片_20220707124304.png然后我们先改右下的 这蓝色底部背景:

给这个div的背景色改成如下,background注意别写错了。颜色一定要淡,最好直接用我写的这个。中间夹杂了三种颜色,淡蓝/白/浅粉。方向朝右。

微信图片_20220707124321.png

看看效果:

微信图片_20220707124328.png

然后我们继续改 把里面的这个小蓝色方块也给改了:

微信图片_20220707124337.png

其实直接复制上面的即可,只是朝向从右right变成了左left。

然后注意给里面的文字白色换成深色的

微信图片_20220707124347.png

最终效果如下:

微信图片_20220707124352.png

然后我们去动手左下角的历史请求记录的背景色:

微信图片_20220707124358.png

然后 去修改点开项目后的俩个按钮:进入和保存:

微信图片_20220707124432.png好,修改完毕,再看看最终效果:

微信图片_20220707124440.png

好,主页的修改到此为止,我只是教给大家修改颜色的方法,大家可以按照自己的喜好 设置成各种各样的主题颜色,这个渐变色不止可以放2种3种的,可以放很多很多颜色,你放个彩虹都没人管。


然后要开刀的是我们深蓝色的左侧菜单:

微信图片_20220707124451.png

我一直觉得这个颜色不好看,终于逮到机会换了。菜单在我们的welcome.html文件里。

因为这个菜单是我们当时下载的第三方的组件,所以要修改它的颜色有俩种方式:

一,在welcome.html页面 强行给它的各个标签加上 背景色,来覆盖旧颜色,二是找到人家自己的css文件,找到对应的颜色并修改。


我们先尝试第二种,找找之前的背景色,不然要一个个标签加太麻烦了。

微信图片_20220707124457.png

我们观察到,这个菜单下面 有这么一句,dark深色。感觉应该是控制菜单主题的代码,我们随便改几个字发现菜单就变成其他样子,更加证实了这个句代码的作用。我们根据这句代码的关键字dark-ruby 去找这个201908059658下css的几个文件 发现:

微信图片_20220707124531.png

果然这几个深蓝和黄 都在里面。一下就找到了。然后就开始大刀阔斧的改颜色吧。

微信图片_20220707124538.png

好了。看看最终效果吧:

微信图片_20220707124545.png

相关文章
|
6天前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
6天前
|
存储 测试技术 数据库
接口测试工具攻略:轻松掌握测试技巧
在互联网快速发展的今天,软件系统的复杂性不断增加,接口测试工具成为确保系统稳定性的关键。它如同“翻译官”,模拟请求、解析响应、验证结果、测试性能并支持自动化测试,确保不同系统间信息传递的准确性和完整性。通过Apifox等工具,设计和执行测试用例更加便捷高效。接口测试是保障系统稳定运行的第一道防线。
|
6天前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。
|
12天前
|
消息中间件 监控 小程序
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。
|
25天前
|
算法 Java 测试技术
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
56 13
|
1月前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
106 11
|
2月前
|
并行计算 算法 测试技术
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面,旨在通过综合策略提升程序性能,满足实际需求。
83 1
|
2月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
2月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
83 3
|
2月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
186 1

热门文章

最新文章