好，虽然绝大多数同学还未追上最新进度进行投票，但是已投情况来看，大部分还是支持首页做成接口快速调试功能。

那么本节课就开始吧，首先我们打开我们的首页：home.html。观察一下目前结构：

我们这次改版相当于完全重构了，所以删除掉body 的css属性和一切子内容

现在主页已经是一片空白了。我们要重新设计了。

首先我们依从postman的风格，整个首页大概分为左右俩部分，左边是请求历史记录，右边是接口调试的具体模版。当我们点击左侧的任意请求记录的时候，右侧则迅速把各个输入框的值变为这次记录存储的数据即可。当然每次请求无论是否成功，左侧的请求记录都会储存好本次请求的请求数据。

另一个功能是当我们右侧的调试功能启动，获取了接口的返回值后，使用者可以看到自己已有的项目列表和新建项目功能，点击即可把本次请求保存到对应项目中。

 

那么我们可以用div来做一条完全可控的竖线，来分割开左右。

 

这个div内部必须有个空格  否则是没有高度的，注意空格用 表示，后面必须写分号。

 

看看效果&