今天完成的事情，修真院的导航栏。

官网的导航栏共有3个部分组成，导航栏logo，与ui列表，和导航栏的控制按钮。

今天遇到的问题1，如何制作导航栏的控制开关，师兄让我参考任务8的导航栏去改，但是我感觉任务13的侧边栏那个开关，我更熟悉一些。

<input type="checkbox" id="nav-menu">
<div id="menu">
    <label id="nav-menu-control" for="nav-menu">≡</label>
</div>

input表单中，我们去把checkbox复选框给隐藏掉。

#nav-menu:checked ~ ul {
  height: 200px;
}

.list {
  margin: 0;
  height: 0;
  padding-left: 0;
  width: 100%;
}

用checked~ui绑定我们的列表，height：200px之后，触发开关撑起高度。list列表height：0。让列表隐藏。为什么我们用height去隐藏ui列表，而不去用dispaly：none的原因是因为，我们在媒体查询还需要用到dispaly：none。如果这个时候用得话，很容易起冲突，也不容易理解。

#nav-menu-control {
  display: block;
  font-family: Courier New;
  font-size: 2em;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
}

设置按钮的样式。我们在复选框里把选择替换为≡之后，只需要修改一字体，属性就可以完成，没有必要去贴图。

导航栏选中的列表项目，会出现白色边框。但是设置之后，点击会有跳动，因为凭空多处了1px的边框产生的。所以我们要设置一条1px边框。和导航栏保持颜色保持一致发现，按钮关闭之后，边框还是会存在。

所以就把边框设置为rgba颜色，全部为0，解决问题。

今天的收获，学会如何去写导航栏。按钮开关的部分卡了很长的时间，还有关于媒体查询的时候。代码放在那里，就是不知道怎么去下手为好。还有就是bootstrap4真的巨好用，完全不需要考虑，间距问题，组件库都是现成的，拿来改下就可以了。

明天计划，轮播图。