今天完成的事情：

1.基本把3个官网界面改掉了。去掉了之前所有的bootstrap。

明天计划的事情：

1.推进任务。

2.开始看js基础。

遇到的问题：

1.缩小到一定宽度后，手写的container对这么小的宽度并没有一个定义。卡片栏就会出现没有左右边距。

所以最好加上一句宽度范围，我写的是80%

@media (max-width: 405px) {
  .container {
    max-width: 80%;
  }
}

2.将所有的scss文件重新做好布局，嵌套写入，方便看，例如将子项都收入父元素内：

.feature-position-1 {
  border-left: 1px dotted #DEDEDE;
  padding-top: 5.5rem;
  padding-left: 5.7rem;

  .pic-people {
    display: flex;
    flex-direction: column;
    align-items: center;

    .people {
      display: flex;
      align-items: center;

      .num-people {
        color: #26A26F;
        font-size: 1.8rem;
        margin-left: 1.4rem;
      }

    }

    .content-people {
      color: #999999;
      font-size: 1.8rem;
      margin: 1rem 0;

    /*在线人数文字大小*/
  }

}

收获：

1.使用很多媒体查询去定义出不同宽度下的细节，以求最好的去适应界面的变化。

2.由于去掉bootstrap后，内部一些依靠它元素会发生变化，所以需要仔细去用F12找到是什么影响到了它，并不断尝试，直到找到正确的方法。官网的细节尽量去优化，某些内容应该是要用到js来实现的。

3.sass的嵌套写法确实很方便，不用再像之前，写一个类名需要前面再定位出父元素。直接嵌套使用就很快。