day07 - 实践

这就是今天要实现的效果图（颜色提取推荐采用snipaste）

代码（仅供参考，不喜勿喷， 可以在评论区展示作品）

/* Write your CSS code here */
body {
  background-color: rgb(240, 243, 251);
  display: flex;
}
.outer {
  width: 600px;
  height: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.first {
  background-color: white;
  height: 40px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px 0px #00000047;
}
.second {
  background-color: rgb(21, 22, 38);
  height: 40px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px 0px #00000047;
  color: white;
}
.third {
  background-color: white;
  height: 40px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px 0px #00000047;
  border-radius: 20px;
}
.four {
  background-color: rgb(21, 22, 38);
  height: 40px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px 0px #00000047;
  color: white;
  border-radius: 20px;
}
.five {
  background-color: white;
  height: 40px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 5px 5px 0px #00000047;
}
.six {
  background-color: rgb(21, 22, 38);
  height: 40px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 5px 5px 0px #00000047;
  color: white;
}
.svg1 {
  width: 30px;
  height: 30px;
  padding: 5px;
}
span {
  display: inline-block;
  line-height: 40px;
  margin-left: 10px;
}
.svg2 {
  width: 20px;
  margin-right: 10px;
}
.svg2:hover {
  cursor: pointer;
}
File has been removed successfuly.
File has been removed successfuly.
File has been removed successfuly.
File has been removed successfuly.
File has been removed successfuly.
File has been removed successfuly.