好本节，继续收尾项目列表。
首先是在最上方 加入一段 说明标题 比较好：
代码语言：javascript复制 <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都可以了。
代码如下：
代码语言：javascript复制 <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的使用和概念。
欢迎小伙伴继续点赞 分享哈～ 原创日更非常不易。
