接口测试平台代码实现23:项目列表收尾

简介: 好本节,继续收尾项目列表。


首先是在最上方 加入一段 说明标题 比较好

   <h3 style="padding-left: 10px;color: #353c48">项目列表:<span style="font-size: small;color: grey;">(这里显示全部项目,您可以进入他人的项目中查看)</span></h3>

微信图片_20220617211036.png效果如下:微信图片_20220617211045.png

然后我们美化一下这俩个按钮,我们可以在head中新建一个style,来控制全页面的按钮css样式。随便起了个.btn, 这样具体元素中就可以用class = "btn" 来套用这里的样式了。微信图片_20220617211054.png

微信图片_20220617211106.png

然后我们试着在.btn{} 里添加一个 背景颜色。刷新看看页面俩个按钮肯定都变了:

微信图片_20220617211116.png

微信图片_20220617211125.png

然后我们试着在.btn{} 里添加一个 背景颜色。刷新看看页面俩个按钮肯定都变了:

微信图片_20220617211133.png

这就是bootstrap3的标准默认空白按钮。当然我们可以改样式:微信图片_20220617211140.png

一个是常用的成功按钮,一个是常用的危险按钮。看看效果:微信图片_20220617211151.png

bootstrap3是一个方便的 css库 让我们可以直接简单的套用很多流行的样式。具体都有什么可以在这个网站找到:微信图片_20220617211159.png

本系列教程后续基本大部分样式都会采用bootstrap3的现成。这样可以有效降低难度,毕竟超级厉害的前端大神才会去硬写自己的风格的样式组建。我们当前任务是平台可用。

接下来我们要增加一个 增加项目的按钮:

先找好地方:我们可以把它放在页面底部 也可以放在顶部,也可以左上角。

我这里直接就放在 顶部中间了,位置要固定跟随屏幕滚动,这样当列表太多用户在滚动到下方时候,依然可以直接点击新增项目按钮。

既然是位置固定,就要脱离文档流,所以我们放在哪去写这个button都可以了。微信图片_20220617211207.png

代码如下:

 <button style="border-left: 10px solid black;border-right: 10px solid black;border-top: 0;
    position: fixed;top: 0px;left: -webkit-calc(50% - 75px);width: 150px;height: 40px;font-size: x-large;background-color: white;color:black ;
    border-radius: 0px 0px 10px 10px;">新增项目</button>

样式较多,大家可以直接复制

当然大家可以自行设计哈,毕竟我的设计被吐槽很多次了。

现在我们的页面 东西都全了.微信图片_20220617211219.png

下一节我们 的任务就是 让这三个按钮都发挥真正的作用:

新增/进入/删除

相关文章
|
13天前
|
并行计算 算法 测试技术
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面,旨在通过综合策略提升程序性能,满足实际需求。
37 1
|
22天前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
28天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
55 3
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
114 1
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
66 2
|
1月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
55 0
|
2月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
71 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
3月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
256 7
Jmeter实现WebSocket协议的接口测试方法
|
3月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
270 3
快速上手|HTTP 接口功能自动化测试
|
3月前
|
JavaScript 前端开发 测试技术
ChatGPT与接口测试
ChatGPT与接口测试,测试通过
55 5