今天完成的事情：

完成任务五代码调试，已上传服务器，经chrome模拟手机均能适应不同屏幕大小。

开始任务六的学习，学习雪碧图：

雪碧图就是把网页中的一些背景图片整合到一张图片文件中区，利用background-position定位图片位置，使得减少向服务器发送请求的次数达到缩减延迟的效果。

优点：

1.减少请求次数，提高页面性能。

2.减少图片字节。

3.统一命名，提高网页制作效率。

4.更换风格方便，整体维护更加便捷。

缺点：

1.合并图片时要预留足够空间防止背板出现不必要的背景；大屏高分辨率的自适应页面图片必须足够的宽，不然容易出现北京断裂。

2.雪碧图开发时测量工作繁琐。

3.维护起来麻烦，一改就要改大图和相应的css。

学习bootstrap，初步了解bootstrap功用：

bootstrap是一种用于前端开发的框架，其中包含的web组建可以方便、快捷的搭建网站：下拉菜单、按钮、按钮下拉菜单、导航、导航条、导航路径、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

明天要做的事：

下载雪碧图合成工具和bootstrap包，上手做出雪碧图，敲一敲bootstrap的组件代码出来看看实际效果。

遇到的问题：

发现

<p class="user-q"><span style="display: block;padding-left:2rem">京城 四方 宝芝林</span></p>

span跟前面的写在一行表现在页面上就在同一行，enter键分行之后竟然就表现为两行了！神奇！研究一下原理是什么。

有用的雪碧图生成工具推荐？

bootstrap应该下载哪个版本的？

收获：

慢慢学吧