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

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

新增/进入/删除

相关文章
|
3月前
|
存储 测试技术 虚拟化
VMmark 4.0.3 - 虚拟化平台基准测试
VMmark 4.0.3 - 虚拟化平台基准测试
80 0
VMmark 4.0.3 - 虚拟化平台基准测试
|
2月前
|
Java 测试技术 Spring
简单学Spring Boot | 博客项目的测试
本内容介绍了基于Spring Boot的博客项目测试实践,重点在于通过测试驱动开发(TDD)优化服务层代码,提升代码质量和功能可靠性。案例详细展示了如何为PostService类编写测试用例、运行测试并根据反馈优化功能代码,包括两次优化过程。通过TDD流程,确保每项功能经过严格验证,增强代码可维护性与系统稳定性。
111 0
|
3月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
650 23
|
2月前
|
人工智能 数据可视化 测试技术
UAT测试排程工具深度解析:让验收测试不再失控,项目稳稳上线
在系统交付节奏加快的背景下,“测试节奏混乱”已成为项目延期的主因之一。UAT测试排程工具应运而生,帮助团队结构化拆解任务、清晰分配责任、实时掌控进度,打通需求、测试、开发三方协作闭环,提升测试效率与质量。本文还盘点了2025年热门UAT工具,助力团队选型落地,告别靠表格和群聊推进测试的低效方式,实现有节奏、有章法的测试管理。
|
4月前
|
安全 前端开发 Linux
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
137 3
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
|
5月前
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
537 24
|
5月前
|
SQL 测试技术
除了postman还有什么接口测试工具
最好还是使用国内的接口测试软件,其实国内替换postman的软件有很多,这里我推荐使用yunedit-post这款接口测试工具来代替postman,因为它除了接口测试功能外,在动态参数的支持、后置处理执行sql语句等支持方面做得比较好。而且还有接口分享功能,可以生成接口文档给团队在线浏览。
211 2
|
8月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
7月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
263 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
7月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
268 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡