1. 增加按钮:备注/复制/异常值测试 ,按钮顺序尽量按照使用习惯 和频率 来设计。
<button>备注</button>
<button>复制</button>
<button>异常值测试</button>
刷新页面,看看效果:
美化,不让按钮串行
<thead>
<tr>
<th>id</th>
<th style="width: 20%">接口名称</th>
<th style="width: 40%">url</th>
<th style="width: 350px">操作</th>
</tr>
</thead>
去head中新建一个样式,随便起名为 wqrf_button
<head>
<meta charset="UTF-8">
<title>接口库</title>
<style>
.wqrf_input{
background-color: #0fd1ab;
}
</style>
</head>
先随便写了个背景颜色属性,以便我们调试,然后给三个按钮的class都写成wqrf_button
颜色变了,证明生效了,接下来让好好设计这个wqrf_button的样式:
<style>
.wqrf_input{
background: linear-gradient(to top, #daffff, white);
border-radius: 5px;
border: 1px solid #353C48;
box-shadow: 4px 4px 4px grey;
}
</style>
2. 接下来想想,还有什么按钮?
- 新增接口按钮,全局请求头设置 按钮,全局域名设置按钮,
- 接口文档解析导入按钮,抓包导入按钮,自定义加密算法按钮,登陆态接口设置按钮等等,很可能后续还会增加。
面对这么多按钮 我们要设计的 就最好是类似一个工作台一样的东西,可以任意添加,统一风格,位置整合 等等。
这里有几种设计:
-
在最上面/ 最底下 做一个横向的 工具栏 ,排列好这些按钮
-
在最右侧放一个工具栏,排列好这些按钮
-
做一个酷炫的导航类圆形按钮
这个问题不是很核心,没必要浪费大量时间去做一堆按钮的排列,所以采用底部放一个工具栏。这样不会经常挡到接口列表,让用户一进来第一眼看到的是 接口列表。
在body的内部最底层,新建一个div,属性为永远保持浏览器的最底部:
<div style="position: fixed; bottom: 0px; width: 100%; background-color: #f8f8f8; text-align: center; border: 1px solid #e7e7e7">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮1</button>
<button type="button" class="btn btn-default">按钮2</button>
<button type="button" class="btn btn-default">按钮3</button>
</div>
</div>
效果如下:
开始把所有设计的按钮放进来吧,其中新增接口按钮因为较常用,所以可以单独增加其他属性以便醒目:
<div style="position: fixed; bottom: 0px; width: 100%; background-color: #f8f8f8; text-align: center; border: 1px solid #e7e7e7">
<div class="btn-group">
<button type="button" class="btn btn-primary">新增接口</button>
<button type="button" class="btn btn-default">全局请求头</button>
<button type="button" class="btn btn-default">全局域名</button>
<button type="button" class="btn btn-default">接口文档导入</button>
<button type="button" class="btn btn-default">抓包导入</button>
<button type="button" class="btn btn-default">加密算法</button>
<button type="button" class="btn btn-default">登录态接口</button>
</div>
</div>
效果如下:
下节课开始依次实现 增删功能。