今天完成的事情：

1.看到任务六需要使用到bootstrap，查看bootstrap的资料。

2.推进任务六，做了大概框架以及下拉菜单，其余部分皆为按钮。

明天计划的事情：

1.以bootstrap作为基础，进一步优化细节部分，如宽高、颜色。

2.添加列表详细内容。

3.看任务深度思考。

遇到的问题：

1.对bootstrap理解不是很深刻，根据定义，Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。是一个快速开发工具，只是我现在还不能体会到它的简便性。

2.顶部三个下拉菜单最初是用的select，后面使用bootstrap时，dropdown-menu有预设样式，就拿过来用。并排三个后发现按下时三个菜单都会相应点击这个动作，导致无论按哪个，下拉的菜单都是第三个菜单的内容。多找找方法，快速解决。

3.底部三个按钮，用了flex布局，按钮button内建一个div盒子和一个文本，div盒子大小和图片大小一致，图片使用雪碧图。不过这样发现按钮的颜色和背景不协调。

原来是按钮有默认的样式，加入命令

button {
    background: none;
    border: none;
}

把背景颜色和边框设置为none后，颜色协调。

收获：

1.bootstrap有了初步应用，虽然理解不是很深，但后面会经常用到，所以多使用就好。

引用bootstrap时，可以在https://www.bootcdn.cn网站，直接引用其链接即可

引用顺序为：

1.先引入 bootstrap.min.css （Bootstrap的样式表文件）

2.然后引入自己写的 css 文件（style.css）

3.然后引入 jQuery（javascript 库）

4.最后引入 bootstrap.min.js 程序文件

示例：

bootstrap.min.css放在head里， jQuery和bootstrap.min.js放在body的最下面。

2.雪碧图，我的理解是，将许多切出来的图做成一张图片，然后设计时需要用到图片时就引用这一张。比喻的话就是一块板子上面开了个洞，图片放在板子下面，上下左右拖动这张图，就透过洞展示出来不同的图片，所以需要写到background-position，以图片的左上角为基准，往XY轴正方向拖动，position值为正，往负方向拖动，position值为负。

3.哇，感觉效率开始变低了。有时候盯一个东西不知不觉就过去很久了，看来这个时候应该直接问师兄，效率应该更高点。