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

相关文章
|
15小时前
|
传感器 数据采集 监控
LabVIEW电池管理系统测试平台
LabVIEW电池管理系统测试平台
|
15小时前
|
数据采集 测试技术
常见测试测量接口的比较: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
|
13小时前
测试时,请求方法一定要写对,写错照样出问题,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中设计可测试的代码的最佳实践
|
2天前
一款测试接口的好插件
一款测试接口的好插件
5 0