今天完成的事情：完成了任务11和任务12的第一个界面
明天计划的事情：把任务12完成
遇到的问题：小图标用的是阿里巴巴的矢量图，但是上传到服务器上无法显示。 买阿里巴巴的服务器解决。 回头写任务4 任务5， 觉得以前写的太烂了，算重新写了一次。现在才发现<span>标签会继承他的父级元素，我一直以为是为了让类不换行用的标签，不知道有没有办法让他不继承。

阿里矢量图在页面的CSS里文件改class是没有用的，一定要在阿里里下载的iconfont.css里改才有用，用了矢量图发现比切的图好用多了，用font-size就可以轻松实现自适应。less的东西还比较简单，虽然还没有去了解less的函数之类的。

收获：对less的语法更熟练了，还有任务四 五的重做让我意识到了自己的进步和不足。

这是我任务11的less的代码

@color: #e1f3f6;
@size:1.5rem;
@width:100%;
@background:#fff;
body {
  margin:0;
  padding: 0;
  background: #eff0f4;
}
.header {
  z-index: 1;
  position: fixed;
  background:#5fc0cd;
  width:@width;
  padding-bottom: @size - 0.7;
  padding-top: @size - 0.7;
}
.box{
  border:none;
  width:@width;
  color:@color;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
th{
  color:@color;
  font-size: @size;
}
  .font{
    font-size: @size + 0.1;
    color:@color;
    width:75%;
}
  i{
    font-size: @size;
    padding-left: @size;
    padding-right: @size;
  }
.box1{
  z-index: 1;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-bottom: 1%;
  width:@width;
  background: @background;
}
.box2{
  width:@width;
  background: #5fc0cd;
}
.font1{
  font-size: @size + 0.1;
  text-align: center;
  letter-spacing:@size - 0.9;
  padding-top: 0.7%;
  padding-bottom: 0.7%;
  color:@color;
  cursor:pointer;
}
.forms{
  height: 5%;
  border: none;
  border-left: solid 1px #eaedee;
  padding-left: 1.5%;
  font-size: @size;
  width:80%;
  outline-style: none;
}
.font2{
  color:#83ccd7;
  float:right;
  margin-right: 1%;
  font-size:@size - 0.1;
  font-weight: 600;
  cursor:pointer;
}
@media screen and (min-width: 360px) and (max-width: 540px){
  html{font-size: 80%;}
  .box1{margin-top: -1.5%;}
}

@media screen and (max-width: 360px){
  html{font-size: 60%;}
  .box1{margin-top: -8%;
  margin-bottom: 5%}
  .box2{margin-top: -8%; }
}