今天完成的事情：

1.推进任务，使用sass调整任务六七的代码。

优化内容：内外边距，取消所有bootstrap，用手写实现。用sass优化代码。

明天计划的事情：

1.继续推进任务。

遇到的问题：

1.伪元素before或after的用法。之前还不知道怎么用，现在稍微好些，箭头这种符号就可以用它来写。

.btn-drop:after {
  position: absolute;
  @include w-h(0, 0);
  content: "";
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid #AFBAC0;
  right: .6rem;
  top: 50%;
  margin-top: -1px;
}

写法是，先定义出一个内容盒子，注意after必须要写content，然后写出上、左和右边框，定义左和右边框为透明，故可以写出一个方向向下的箭头。向左向右情况也类似。给其一个绝对定位，方便在父元素内游走定位。上下居中定位可以使用margin负边距的用法，距离上边50%，并用margin-top给出自身高度一半的数值，即可实现居中定位。

收获：

1.关于伪元素

·伪元素即”虚假的元素”，可通过CSS来控制，但无法在HTML源码中查看，也无法通过DOM来操作。

·伪元素必须设置content属性，否则无效。

·伪元素插入的位置是元素内容的首部或尾部。

·插入的伪元素默认为内联元素。

2.今天才知道一个快速优化代码的快捷指令：ctrl+alt+L。可以一键调整出规范的代码格式，比如换行空格，冒号后的空格等。

为什么没有早点发现呢，啊。

3.暂时不清楚如何实现这个左拉菜单，如果不用bootstrap的话。目前想的是要不要再用hover来实现？