今天完成的事情：

1.任务六基本完成

明天计划的事情：

1.完善任务六细节，如点击效果。

2.看任务深度思考。

3.如果知识理解好，继续推进任务。

遇到的问题：

1.自己给自己的雪碧图踩了个雷。

这些图标都是引用了雪碧图，手机端显示无问题，但转到电脑端，会出现图标位置不对。

，我明明坐标都和雪碧图一样呀，咋回事。摸索很久不解，询问师兄。师兄看了我的雪碧图和代码，很快找到原因。原来我在代码中写px时习惯用rem代替，所以比如-36px，会写成-3.6rem。

但雪碧图里图标的位置是固定的，单位应该用px。rem也许会出现转换的问题。所以改掉单位后，问题解决。。。

2.关于使用bootstrap引用下拉菜单。bootstrap的好处就是可以直接拿已经搭好的样式来使用，不用自己再重写。不过也会出现别人的样式和自己需要的样式不一的情形，这个时候需要做一些更改。引用的下拉菜单样式是这样的：

我需要把他们做成能适应随宽度变化而变化。开始不知道应该改什么，后面用F12仔细查看后，需要定位到该下拉菜单对应的代码，然后自己手动在css里写出该代码，再做修改。比如上图应该把盒子宽度改为33.3%，按钮100%随盒子，才能出现想要的结果。

3.内容框的三角符号可以用图片，也可以用css样式写出来，这样的好处是响应快，不过目前不知道怎么调整它的边距，因为改边距是从四个边入手的。

收获：

1.了解了雪碧图的一个使用问题，也许不算问题，但也要警戒。

2.对bootstrap引用下拉菜单有了一些了解，使用确实很方便，可以通过查看组件一起使用https://v2.bootcss.com/components.html#dropdowns

3.箭头图标的使用，css代码写出来效果也可以，方法是先写一个正方形，给出上方和右方的两条边框宽度和颜色，再把整个正方形向右旋转45度，旋转、移动等的命令是transform。

transform: rotate(45deg);