做一个好看的页面真的是一件困难的事情,所以还是遵循复制后修改的原则,首先是借鉴httpbin页面的方式进行块状展开。
![bdc94e98c95bfc204e4a0c38a76678d1.png](https://i-blog.csdnimg.cn/blog_migrate/93e8a9ddbafc1c6983c591d4e05b0107.jpeg)
块状
从模版中找到类似的html代码:
![5657f37cac59579772aa27773734fe69.png](https://i-blog.csdnimg.cn/blog_migrate/572ece2b5497c1da0f20e06539e6becd.jpeg)
块状
我们可以看到一下它的动态效果,可以自主的展开和合拢。蛮符合我们的要求的
![75db1b3a66e501aa09b1d0fb1ff9c140.gif](https://i-blog.csdnimg.cn/blog_migrate/f4d9bace572a14b435afdf40314a29ca.gif)
动画效果
但是里面只有一行内容,我们需要在里面放一个类似表格的输入框,所以继续找到如下表格
![08e66c6ff914485f829375e409cbae5f.png](https://i-blog.csdnimg.cn/blog_migrate/5b0a0e46acfc2b0cd1ded85170f58967.jpeg)
表格形式
通过组合之后就符合我们的要求了。
大概展示的效果如下:
![eb70c392d2f0350d9039a68ec5eea706.png](https://i-blog.csdnimg.cn/blog_migrate/9a687a1ead5ce50d33d16c8429416f12.jpeg)
最终效果
感觉符合整体的画风了。
下面来看看这一段让人头大的代码从最前面部分开始好了,首先是接口名称和它的输入框
接口名称
虽然丢人的使用了br来进行换行,但是从一个实用主义的角度来看,先这样吧,不会CSS的我还能咋办。
里面使用style="width: 30%; border-radius:5px;"来调整输入框的大小为30%,输入框是圆角的。之前的直角太硬了,看上去很不舒服。
然后是URL部分:
URL
请求方式: GETPOSTPUTDELETE 传输协议: httphttps
URL
这一部分实现了
当class是box box-default collapsed-box的时候横条会自动隐藏,当box-header with-border的时候会自动显示,这个当然是通过测试发现的,测试方法可以看如下动图,分别是点击小图标后的显示与隐藏导致的class变化
![6edc9e6a0734465e5e92e70a7cdbe5ce.gif](https://i-blog.csdnimg.cn/blog_migrate/792a2d82ab5f9d3cdac243981f8a5f6c.gif)
显示与隐藏
感兴趣可以通过查看监听点击操作查看JS干了什么事情
![b92d7418b0c622e16dc927b207a9eef9.png](https://i-blog.csdnimg.cn/blog_migrate/8b4a861c2ff9bfcd471d1fe03314ae79.jpeg)
JS代码查看方式
进到URL的内部可以看到一个,相当于自成一个小世界。
label标签放展示的内容,input标签放输入框,select标签放下拉框
经过多次的测试之后就会发现摆放好了。
![b64c453e7d9ccaa135f6b2936178a08c.png](https://i-blog.csdnimg.cn/blog_migrate/ff3bd5e02f939c5e7278f8837e15d30b.jpeg)
请求头部
请求头部部分增加了+和-的操作,可以按照需要进行新增键值对,不过JS部分代码还没写,所以这两个只是个简单的图标而已
![10a8f3118216276840e2f1cc32341204.png](https://i-blog.csdnimg.cn/blog_migrate/95523f14853341be01a912809e170eaf.jpeg)
图标
通过需改字体的大小就可以调整图标的大小了:style="font-size:25px;"
其他部分自行查看github上的代码吧~~
https://github.com/zx490336534/Zxapitest
欢迎关注我的公众号:zx94_11