今天完成的事情：通过了任务6，任务7的首页写了一半，被师兄教训了rem的用法设百分比不是直接0.875rem；

对bootstrap有点了解了但不是很懂不知道怎么用；任务7的选人页也写了一点写到一半就没头绪了；卡在水手不知道直接用图片还是拆开；拆开发现自己把握不了；

明天要做的事：做完任务7最少2个页面；学习bootstrap的初步使用，熟悉媒体查询；

难题：设置了媒体查询之后只有字体发生变化；改了font-size之后变化也不大；对媒体查询不是很熟练；任务7首页没能实现自适应；

这个是主要原因；bootstrap布局完全不知道从哪下手；

收获：通过了任务6，但是没用bootstrap；直接用css写完了写到最后还是不知道雪碧图用在哪?

对css的使用开始熟练起来了；

写任务7时师兄对我的rem使用又一次教育；

对button特别喜欢真的巨好用；不能上传数据；

对bootstrap有一定的了解但是无从下手，拿在手上脑子里一点东西都没有不晓得咋用；感觉自己前面的基础打得不太牢；学得太笼统了；要不就是自己太笨了

到是看了 阮一峰老师的响应式图像脑子里有点映像了：

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性

，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {

  display: block;

  height: auto;

  max-width: 100%;

}

这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block，以块级元素显示。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

以上是看完的笔记

还有bootstrap里的md-sm-x：

一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式

、col是column简写：列；

xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大；

-* 表示占列数，即占每行row分12列栅格系统比；

.col-xs-* 超小屏幕如手机 （<768px）时使用；

 .col-sm-* 小屏幕如平板 （768px ≤ 宽度 ＜992px）时使用；

 .col-md-* 中等屏幕如普通显示器 （992px ≤ 宽度 ＜ 1200px）时使用；

 .col-lg-* 大屏幕如大显示器 （≥1200px）时使用。