• 今天完成的事情：

• 1、完成了任务8的页面1。实现了和设计图大体上相同，不过还有一些细节没有处理好。
  

• 2、学习了弹性盒子中的justify-content属性，在弹性盒对象的 <div> 元素中的各项周围留有空白，根据不同的取值情况可实现不同的效果。
  

• 3、学习了bootstrap的img-responsive。可以使得图片可以根据窗口大小变化，从而实现响应式。

  4、在页面1中尝试了使用bootstrap的媒体查询@media。

• 明天计划的事情：

• 1、写完任务8的页面2，在布置时尽量考虑下响应式，为任务9做准备。

• 2、在页面2中为hover添加动画效果。

• 
  

• 遇到的问题：
  

• 1.在友情链接块中使用了bootstrap中的awesome字体图标。但其不能再缩小，只能放大，导致所做出来的和设计图相比大了很多。

• 如图所示。

• 
  

• 收获：
  

• 1、今天听了师兄的小课堂，正好是关于响应式设计-wiewport，这对于任务9正好有帮助。了解了三个viewport。

  layout viewport： ‍‍网页实际区域的大小‍‍

• visual viewport ：‍‍浏览器可视区域的大小‍‍

• ideal viewport：‍‍完美适配移动设备，不同的设备拥有不同的ideal viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。‍‍

‍‍移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。此时利用meta标签对viewport进行控制。更详细的知识可参阅2017.3.29武汉小课堂。‍

• 2、使用 .col-md-offset-* 类能使bootstrap的栅格系统中的列发生偏移。

  .col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

  在大屏幕显示器上使用偏移，使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

• • 3、justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-content 属性对齐交叉轴上的各项（垂直）。对于弹性盒子现在还只会一些简单的操作，还需要多加学习。

  • • 4、对img设置img-responsive使得图片可以根据窗口大小变化，从而实现响应式。如果需要实现响应式图片水平居中，那么使用 .center-block 类。

  
  

• 
  

•