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

2022-05-19 09:13:45 浏览数 (1)

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

美化设计:

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

1.百度风格

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

2.hao123风格

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

3.数据总结显示:

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

4.广告类页面

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

5.主要工具实用类

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

6.文字排版文档类简

简单单欢迎语 使用说明 更新说明

特点:制作简单,无任何难度。只要设计得体,那么依然漂亮的一批,国外的很多开源网址,下载地址页面都这样,低调,朴素。

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

首先,我们设计一个欢迎语

打开项目,让我们新建一个html页面,叫做:home.html

这里我们要更改一个概念:welcome.html 我们准备后续给它当作公共菜单。home.html 作为主页。所以我们把welcome.html的title改成测试平台:

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

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

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

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

代码语言:javascript复制
<body style="text-align: center">

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

看看效果:

接下来我们继续写其他的:

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

br标签是回车换行符

a标签是超链接

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

看看效果:

接下来让我们放一个图片进来装点一下:

图片的标签是img,你输入img之后,按下tab键,就会自动给你补全:

按tab键:

神奇么?

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

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

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

顺便在图片之前加俩个br

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

为啥会发生这个现象呢?

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

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

按如图修改,新写一个home/$ 作为url

然后我们去views.py写这个home函数:

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

现在让我们打开网址:127.0.0.1:8000/home/ 来看看刚刚开发的首页!

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

回来浏览器,刷新看看。

现在小多了。但是图片内容可能引起小邪

0 人点赞