接口测试平台代码实现8:首页的继续开发

简介: 接口测试平台代码实现8:首页的继续开发

上节说到,首页我们可以成功打开了。本节就说说,如何设计主页吧~

美化设计:

关于设计这点,老实说,我是没有什么话语权的,因为我做的东西不好看。但是大不了我们可以借鉴啊.....所以我们来介绍几种设计:

1.百度风格微信图片_20220615221755.png

特点:简洁明了,加载飞快,搜索功能强大,很容易被同事作为书签页收藏甚至做成主页。


2.hao123风格微信图片_20220615221805.png

特点:满屏的超链接,花里胡哨,但是很实用,全都是常用网址,设计公司内测试平台的话也可以用各种内部常用链接作为首页,这样做更容易让同事保存成书签。


3.数据总结显示:微信图片_20220615222330.png特点:此类页面更加直观的给用户展示必要数据,显得高大上和正规。但是要求技术难度较高,且需要大量的网上去抄第三方控件,首次进入加载会很慢。


4.广告类页面

微信图片_20220615222444.png

特点:通篇的大屏图片,动画,感觉高端大气上档次。低调奢华有内涵,但是不太适合作为一个测试平台使用


5.主要工具实用类

特点:就相当于 没有主页了。用户进来的第一个页面 就是一个最常用的工具页面,给人感觉是比较务实,但是失去了仪式感。


6.文字排版文档类简简单单欢迎语+使用说明+更新说明特点:制作简单,无任何难度。只要设计得体,那么依然漂亮的一批,国外的很多开源网址,下载地址页面都这样,低调,朴素。


本节我们就介绍第6个,做一个简单的页面美化

首先,我们设计一个欢迎语打开项目,让我们新建一个html页面,叫做:home.html这里我们要更改一个概念:welcome.html 我们准备后续给它当作公共菜单。home.html 作为主页。所以我们把welcome.html的title改成测试平台:

微信图片_20220615222706.png


这样我们后续进入的各种页面都会显示这个了


好的,让我们打开新建的home.html开始开发:

微信图片_20220615222713.png

然后在浏览器打开看看效果:

微信图片_20220615222846.png

接着设计, 给body增加text-align属性,值为center。这个意思是让整个body内的文字元素都居中显示。

<body style="text-align: center">


微信图片_20220615223117.png

然后如上图,我们添加了一个div块,用来存放 使用说明。并且给它加了一些自己的特定属性。虽然在body这个父控件中指定了text-align:center。但是如果内部子控件单独写了同一个属性,那么这个子控件将不再接受父控件的这个属性,而按照自己单独写的。


看看效果微信图片_20220615223125.png接下来我们继续写其他的:

微信图片_20220615223348.png


其中span   标签是静态文案的标签,写了之后可以肆意的去改变文案的大小字号,颜色,阴影等各种样式了。

br标签是回车换行符

a标签是超链接

h1 - h5都是常用的标题,自动加粗加黑加大


看看效果微信图片_20220615223259.png

接下来让我们放一个图片进来装点一下:图片的标签是img,你输入img之后,按下tab键,就会自动给你补全:

微信图片_20220615223524.png

按tab键:

微信图片_20220615223530.png

神奇么?src属性就是你的图片的具体位置路径。alt属性是缺省,就是当你的图片坏了找不到了,就会显示alt的属性内容,比如说:抱歉,图片走丢了 5555

我们的图片应该放在哪呢?当然是static这个静态资源文件夹了

微信图片_20220615223648.png

然后我们在src属性中写路径,一定要以 /satic/开头,注意左边的/

顺便在图片之前加俩个br

微信图片_20220615223654.png

好了现在,我们在浏览器打开可以看到:

微信图片_20220615223701.png为啥会发生这个现象呢?

因为我们的图片路径是以/static/开头的写法。这个写法是因为django服务会自动去static中提取所有静态资源,但是我们目前是直接在浏览器中打开home.html,并没有走django的路线,所以找不到这个路径。而如果要在django服务中看到,我们必须要先去写urls.py的映射,然后写个后台函数,后台函数来返回我们的home.html,才可以。

所以现在开始写url映射吧~

微信图片_20220615223928.png

按如图修改,新写一个home/$ 作为url然后我们去views.py写这个home函数:微信图片_20220615223934.png

然后确保我们的服务没有停止。

现在让我们打开网址:127.0.0.1:8000/home/ 来看看刚刚开发的首页!微信图片_20220615223941.png

可以看到图片很好的加载了,但是显得有点大,让我们给它加一个width宽度css属性:微信图片_20220615224139.png

回来浏览器,刷新看看。微信图片_20220615224144.png

现在小多了。但是图片内容可能引起小邪😈同学的极度

不适和反感,所以我们换个图。比如我们去做一个平台自己的专属logo!微信图片_20220615224243.png微信图片_20220615224301.png

然后按照步骤一步一步设计吧。注意,如果网站要求付费或者登陆,小伙伴们还是按照要求来,这个花不了太多钱的,人家开平台也是需要成本的哈。

当然你也可以自己用ps设计

微信图片_20220615224354.png

好了本节就介绍到这里。小伙伴尽量自己凭着自己的美感来设计属于自己特有的主页。下节预告:如何让各个页面都显示我们的菜单。

相关文章
|
17小时前
|
数据挖掘 测试技术 网络安全
LabVIEW开发卫星测试平台
LabVIEW开发卫星测试平台
|
17小时前
|
数据采集 编解码
LabVIEW开发教学实验室自动化INL和DNL测试系统
LabVIEW开发教学实验室自动化INL和DNL测试系统
|
23小时前
|
程序员 测试技术
程序员难以一次性写好代码并持续修复Bug,主要源于软件的高复杂性、需求不确定性、测试局限性和技术能力限制。
程序员难以一次性写好代码并持续修复Bug,主要源于软件的高复杂性、需求不确定性、测试局限性和技术能力限制。复杂的系统易产生意外问题,需求变化导致初始设计难完备,测试无法覆盖所有情况,而技术更新和个体能力差异也会引入错误。因此,持续调试和优化是保证软件质量的关键步骤。
5 0
|
1天前
|
监控 网络安全
LabVIEW开发干扰对无线网络基础设施进行隐蔽影响测试
LabVIEW开发干扰对无线网络基础设施进行隐蔽影响测试
|
1天前
|
传感器 数据采集 监控
LabVIEW开发感应电机自动测试台
LabVIEW开发感应电机自动测试台
|
1天前
|
算法 物联网 5G
LabVIEW开发最小化5G系统测试平台
LabVIEW开发最小化5G系统测试平台
|
1天前
|
传感器 测试技术
LabVIEW开发分段反射器测试台
LabVIEW开发分段反射器测试台
|
1天前
|
传感器 安全 数据库
LabVIEW开发高压航空航天动力系统爬电距离的测试
LabVIEW开发高压航空航天动力系统爬电距离的测试
|
1天前
|
传感器 监控 安全
LabVIEW开发汽车安全带张紧测试
LabVIEW开发汽车安全带张紧测试
11 3
|
1天前
|
传感器 测试技术 Python
LabVIEW开发矿用泵液压头测试系
LabVIEW开发矿用泵液压头测试系

热门文章

最新文章