接口测试平台代码实现8:首页的继续开发
上节说到，首页我们可以成功打开了。本节就说说，如何设计主页吧～
美化设计：
关于设计这点，老实说，我是没有什么话语权的，因为我做的东西不好看。但是大不了我们可以借鉴啊.....所以我们来介绍几种设计：
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内的文字元素都居中显示。
<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属性：
回来浏览器，刷新看看。
现在小多了。但是图片内容可能引起小邪😈同学的极度
不适和反感，所以我们换个图。比如我们去做一个平台自己的专属logo！
百度，在线logo制作，你会看到很多同类型的网站：
让我们随便打开一个免费的：
然后按照步骤一步一步设计吧。注意，如果网站要求付费或者登陆，小伙伴们还是按照要求来，这个花不了太多钱的，人家开平台也是需要成本的哈。
当然你也可以自己用ps设计
好了本节就介绍到这里。小伙伴尽量自己凭着自己的美感来设计属于自己特有的主页。
下节预告：如何让各个页面都显示我们的菜单。
腾讯云开发者
