今天完成的事：了解导航栏的原理  轮播图的原理

遇到的问题：知道三张图片最少要5个label分别对应5个按钮，然后默认按钮隐藏

#mid {
  width: 100%;
  overflow: hidden;
  position: relative;

容器设置宽度100% 相对定位，溢出隐藏

#img1, #img2, #img3 {
  display: none;
}

按钮设置隐藏

  img {
    width: 20%;
    margin-top: -1px;
    height: 30vw;
    float: left;
  }
}

图片使用左浮动

#crousel {
  margin-left: 0;
  width: 500%;

容器UL设置500%

#tip4{ position: absolute;
  top: 50%;
  left: 8%;
  width: 10px;
  height: 10px;
  border-top: 5px solid #e7e7e7;
  border-right: 5px solid #e7e7e7;
  transform: rotate(-133deg);
  cursor: pointer;}
  }

绝对定位border做出三角，旋转-133edg

光标是手

img1:checked ~ #mid #carousel {
  margin-left: 0;
}
#img2:checked ~ #mid #carousel {
  margin-left: -100%;
}
#img3:checked ~ #mid #carousel {
  margin-left: -200%;}

这个是选择然后改变突变的重要模式

0 -100 -200

分别对应三张图片

因为ul是左浮动

label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid #d0d6d9;
  cursor: pointer;

这是label的样式

今天有点水

明天的事：继续轮播图争取写出来。