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

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

新增/进入/删除

相关文章
|
14天前
|
SQL JavaScript 前端开发
基于Python访问Hive的pytest测试代码实现
根据《用Java、Python来开发Hive应用》一文,建立了使用Python、来开发Hive应用的方法,产生的代码如下
45 6
基于Python访问Hive的pytest测试代码实现
|
15天前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
77 7
Jmeter实现WebSocket协议的接口测试方法
|
15天前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
75 3
快速上手|HTTP 接口功能自动化测试
|
17天前
|
测试技术 UED
软件测试的艺术:从代码到品质的探索之旅
在数字时代的浪潮中,软件已成为我们生活和工作不可或缺的一部分。然而,高质量的软件背后隐藏着一门鲜为人知的艺术——软件测试。本文将带你走进这门艺术的世界,从基础理论到实践应用,一起探索如何通过软件测试保障产品质量,提升用户体验,并最终实现从代码到品质的华丽转变。
|
10天前
|
敏捷开发 安全 测试技术
软件测试的艺术:从代码到用户体验的全方位解析
本文将深入探讨软件测试的重要性和实施策略,通过分析不同类型的测试方法和工具,展示如何有效地提升软件质量和用户满意度。我们将从单元测试、集成测试到性能测试等多个角度出发,详细解释每种测试方法的实施步骤和最佳实践。此外,文章还将讨论如何通过持续集成和自动化测试来优化测试流程,以及如何建立有效的测试团队来应对快速变化的市场需求。通过实际案例的分析,本文旨在为读者提供一套系统而实用的软件测试策略,帮助读者在软件开发过程中做出更明智的决策。
|
14天前
|
SQL JavaScript 前端开发
基于Java访问Hive的JUnit5测试代码实现
根据《用Java、Python来开发Hive应用》一文,建立了使用Java、来开发Hive应用的方法,产生的代码如下
46 6
|
15天前
|
JavaScript 前端开发 测试技术
ChatGPT与接口测试
ChatGPT与接口测试,测试通过
28 5
|
16天前
|
测试技术 持续交付
软件测试的艺术:从代码到信心的旅程
探索软件测试不仅仅是发现错误的技术过程,它是一场从编码到用户信心的转化之旅。本文将带你了解如何通过创造性思维和系统方法,将软件测试变成一门艺术,确保产品质量的同时,提升用户对技术的信赖。
33 4
|
1天前
|
机器学习/深度学习 敏捷开发 测试技术
软件测试的艺术:从代码到用户心灵的旅程
在阅读本文之前,让我们先共同思考一个问题:“为什么即使是最小的错误,也可能对用户体验和企业声誉造成巨大的影响?” 正如我们将要探讨的,软件测试不仅是技术活动的一种,更是确保产品质量、优化用户体验和维持品牌声誉的关键步骤。本文将引导您了解软件测试的基本概念,探索其背后的艺术性,以及如何高效地实施测试策略来达到最佳的质量保证结果。
9 0
|
1月前
|
网络协议 测试技术 网络安全
Python进行Socket接口测试的实现
在现代软件开发中,网络通信是不可或缺的一部分。无论是传输数据、获取信息还是实现实时通讯,都离不开可靠的网络连接和有效的数据交换机制。而在网络编程的基础中,Socket(套接字)技术扮演了重要角色。 Socket 允许计算机上的程序通过网络进行通信,它是网络通信的基础。Python 提供了强大且易于使用的 socket 模块,使开发者能够轻松地创建客户端和服务器应用,实现数据传输和交互。 本文将深入探讨如何利用 Python 编程语言来进行 Socket 接口测试。我们将从基础概念开始介绍,逐步引导大家掌握创建、测试和优化 socket 接口的关键技能。希望本文可以给大家的工作带来一些帮助~