今天完成的事情：

1. 编写任务8的第三个页面，不过今天看了一下任务9，发现任务9就是重写任务8，给任务8加上自适应，再加上我自己本身之前写的任务8的bug较多，所以决定任务9和任务8一起做，所以还学习了响应式的内容。
2. 因为用bootstrap写出来的bug太多，所以重新温习了Bootstrap，重新了解了bootstrap的栅格系统，切忌不要再bootstrap中嵌套太多层row和col，可以用自己写的div代替col.否则显得很混乱！

明天的计划：

重写任务8的第一、第二个页面。

遇到的问题：

在写任务8第三个页面的时候hover效果不断闪烁（解法见收获）

收获：

媒体查询(Media Queries)

媒体查询能在不同的条件下适用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。

媒体查询的使用方法

link元素中的CSS媒体查询{

样式表的CSS媒体查询

@media 媒体类型 and (媒体特性){

//你的样式 }

媒体查询的常用方式

1. 最大宽度max-width

指媒体类型小于或等于制定的宽度时，样式生效. 例：

上面的代码表示当屏幕宽度小于或等于480px时，页面中的区块被隐藏。

2. 最小宽度min-width

与max-width相反，表示媒体类型大于或等于指定宽度时，样式生效。

任务8第三个页面hover闪烁问题：

在做任务8第三个页面的时候把鼠标指针指到盒子上时应该正常显示IOS工程师的简介，但是出现了画面不停闪烁的症状

原因：

当触发hover的盒子和要显示的盒子重叠在一起时，当触发hover效果的瞬间，要显示的盒子挡住了有hover的盒子，此时hover失效，画面消失，在消失的一瞬间，hover的盒子的hover效果又被触发。如此循环下去就导致了画面闪烁。

解决办法：

给要显示的盒子也加上相同的hover效果。