接口测试平台代码实现23:项目列表收尾

好本节，继续收尾项目列表。

首先是在最上方 加入一段 说明标题 比较好：

    <h3 style="padding-left: 10px;color: #353c48">项目列表：<span style="font-size: small;color: grey;">（这里显示全部项目,您可以进入他人的项目中查看）</span></h3>

效果如下：

然后我们美化一下这俩个按钮,我们可以在head中新建一个style，来控制全页面的按钮css样式。随便起了个.btn， 这样具体元素中就可以用class = "btn" 来套用这里的样式了。

然后我们试着在.btn{} 里添加一个 背景颜色。刷新看看页面俩个按钮肯定都变了：

大家自行进行美化哈。当然这里我们可以用bootstrap3的 按钮样式。

直接把俩个按钮的 class="btn"改成class="btn btn-default"

刷新看看：

这就是bootstrap3的标准默认空白按钮。当然我们可以改样式：

一个是常用的成功按钮，一个是常用的危险按钮。看看效果：

bootstrap3是一个方便的 css库 让我们可以直接简单的套用很多流行的样式。具体都有什么可以在这个网站找到：

https://www.runoob.com/bootstrap/bootstrap-v2-buttons.html

本系列教程后续基本大部分样式都会采用bootstrap3的现成。这样可以有效降低难度，毕竟超级厉害的前端大神才会去硬写自己的风格的样式组建。我们当前任务是平台可用。

接下来我们要增加一个 增加项目的按钮：

先找好地方：我们可以把它放在页面底部 也可以放在顶部，也可以左上角。

我这里直接就放在 顶部中间了，位置要固定跟随屏幕滚动，这样当列表太多用户在滚动到下方时候，依然可以直接点击新增项目按钮。

既然是位置固定,就要脱离文档流，所以我们放在哪去写这个button都可以了。

代码如下：

 <button style="border-left: 10px solid black;border-right: 10px solid black;border-top: 0;
    position: fixed;top: 0px;left: -webkit-calc(50% - 75px);width: 150px;height: 40px;font-size: x-large;background-color: white;color:black ;
    border-radius: 0px 0px 10px 10px;">新增项目</button>

样式较多，大家可以直接复制。

当然大家可以自行设计哈，毕竟我的设计被吐槽很多次了。

现在我们的页面 东西都全了.

下一节我们 的任务就是 让这三个按钮都发挥真正的作用：

新增/进入/删除

今天我们主要学习了bootstrap3的使用和概念。

欢迎小伙伴继续点赞+分享哈～ 原创日更非常不易。