今天完成的事情：

解决了昨天任务7中第2个页面浏览器宽度变化中间导致的中间和下面的空白区域，完成了第3个页面的布局，并成功提交了任务7。

提交成功任务后，利用晚上的时间把任务7中的布局和代码重新回顾、复盘了一遍，将其中运用不是很熟悉的代码又重新敲了一遍，并进行相应调试、查看效果、增强理解和记忆。

明天计划的事情：

学习CSS动画和轮播图的相关知识，开始做任务8。

遇到的问题：

开始是用&nbsp空格来进行间隔的，但后来发现用空格不太好把握、也不太精确，联想到前两天小课堂隐藏的知识，就用visibility: hidden进行了解决；

做完任务之后参考其他人的代码，看到有师兄写有font-size：0的代码，在页面调试中间距有细微变化，但不清楚具体原因及影响。后来经过查找资料，明白了

在firefox，safari，opera，ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符。可以在inline-block的父元素中加上 font-size：0；然后在 inline-block中将字体设回来，然后就可以消除这多出来的3px的间距。

收获：

学会了根据不同窗口宽度大小来设置根字体，从而通过rem来进行一定程度的自适应。

@media screen and (min-width: 360px) and (max-width: 374px) {

    html {

        font-size:121px;

    }

}

@media screen and (min-width: 375px) and (max-width: 411px){

    html {

        font-size:132px;

    }

}

@media screen and (min-width: 412px) and (max-width: 640px) {

    html {

        font-size:150px;

    }

}

@media screen and (min-width:640px)

{

    html {  font-size: 191px;  }

}

学会了给按钮加上链接的2种方法：