师兄指出了不少错误，也给出了解决方案。任务6终于算是完成了。

谢谢师兄们的帮忙和指正！

今天完成的事情：

1、任务6。

2、了解html5新标签。

明天计划的事情：

任务7。

遇到的问题：

1、bootstrap按钮自带样式覆盖。

解决办法：

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。按F12找到相应的代码，css样式中覆盖。不过点击状态好像没改成功。。

/*******按钮样式覆盖*****/
.btn1:hover,
.btn1:focus,
.btn1:active,
.btn1.active{
border:0;
background:#55a8b3;
color:#fff;}

.btn2:hover,
.btn2:focus,
.btn2:active,
.btn2.active{
border:0;
background:#fff;
color:#5fc0cd;
}

2、图片缩放。

解决办法：

除了ps，属性transform:scale(x,y)也可以缩放。但是缩放后子元素位置就不好说了。具体还没细看，有时间再研究。

3、下拉框。
解决办法：

用bootstrap的组件或者select标签。任务6用的select标签。

<form>

    <select>

        <option>...</option>

                      ......

        <option>...</option>

    </select>

</form>

4、头部标题的找护工的左边没有使用border-radius。

解决办法：

师兄说左右两边设置border-radius,然后用margin负值两个单独的按钮可以解决问题。不过我的两个按钮是用bootstrap的按钮组，所以用F12找到代码，覆盖了样式。

.btn-group>.btn:last-child:not(:first-child),{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

5、尾部的左右两图标的位置。

解决办法：

因为左右两个图标底下有文字，如果直接浮动不能垂直居中对齐，所以给两个图标又加了div，让div分别向左右浮动。

收获：

1、bootstrap培养了我读代码的耐性。。

2、垂直居中的方法有很多，不过最近发现最好用的还是position。吐槽一下，最不好用的好像是vertical-align，它可能是我见过最奇葩的属性了。。