今日所做：

1.学习雪碧图，下载一个做雪碧图的软件，看下教程，然后把需要用的图片做成一个雪碧图，

软件会自动给出一个txt格式的图片的位置。

2.在页面中使用雪碧图，但是发现图片位置不太好，然后上网查看background-position属性的说明，background-position

的定义是用来确定图片在div中的开始位置点，如果按照坐标轴来看的话，图片放在了坐标轴的第四象限，因此图片的y值应该

是负值，将y坐标改为负值，图片的位置就摆放合适了。

3.学习栅格系统，发现这个系统对于布局来讲非常方便好用，row放在container里，col放在row中，默认一行最多分配12列，

每行中的div都可以通过设置col-xs-m来确定盒子的宽度，如果一行中放不下了，会自动跳到第二行。

4.按F12进入调试界面，栅格系统默认离左右边界会有一段距离，尝试对其进行调试，发现是因为container中有一个默认的padding值，

把container的padding值设为0，栅格则宽度则和屏幕一样宽了。

5.完成任务6

6.对任务7第一个页面进行布局

明日计划：

1.继续做任务7，在第二个页面中用到栅格系统

2.对任务6的一些小细节进行修改

遇到的问题：

1.做任务6的过程中发现一排下拉按钮中的菜单总是靠近屏幕的左侧，尝试着改变一下没有效果，后来发现下来菜单的父元素是div，而下拉菜单的

position为absolute，由于父元素position是static，所以下拉菜单是相对于更大的父元素定位的，于是将父元素position设为relative，下拉菜单

的位置就正确了

2.一个div1里套了一个小div2，给div2一个margin-top，结果div2没有和div1分开，而是带着div1一起脱离了上面的界面，后来去问师兄，师兄

说是因为margin导致的塌陷问题，上网查了一下，给父元素设置了一个overflow：hidden，解决了这个问题