今天完成的事

1.依据师兄的提示完善task11的页面

2.去除bottom的默认边框样式

border: none !important;

3.架构忘记密码部分

<div class="div">
    忘记密码?
</div>

4.添加样式

.div {
  .display-flex;
  justify-content: flex-end;
  .t(245px);
  right: 10px;
  color: @NO1-color
}

5.修正了使用&代替label失败的伪元素样式

.label::after {
  .top(17px);
}
.label::before {
  .top(79px);
}

6.增加登录按钮与输入框之间的距离

.top(210px);

7.修正登录按钮字体过大的问题

8.修改输入框中占位符字体为灰色

.label {
 .display-flex;
  .top(50px);
  flex-flow: column;
  input {
       margin-top: 10px;
    height: 50px;
    padding-left: 70px;
    border: none;
    background-size: 20px !important;
    &::placeholder {
      
   color: silver;
   }
 }
}

9.修改灰色间隔条的高度并同步调整位置

height: 30px;

.label::after {
  .top(20px);
}
.label::before {
  .top(84px);
}

10 调整两个图标的大小并同步调整位置

background-size: 14px !important;

  .img1 {
    background: url("iphone.png") no-repeat 16px 16px white;
  }
  .img2 {
    background: url("locked.png") no-repeat 16px 16px white;
  }
}

11.进行细微处的颜色调整

@color2:rgb(225,229,231);

12.将伪元素间隔条的宽度调整为1px

13.再次提交任务11

明天计划的事

1.完善任务11的样式

2.继续学习less

3.开始任务12

遇到的问题

1.修改按钮样式时 less有一个错误

webstorm自动转化为css文件是报错

然后在less后面部分添加样式始终无法自动编译到css文件中

修改错误部分后

在后面添加的样式就能正确编译为css样式了

今天的收获

昨天急急忙忙的就提交了任务11 没有仔细对比与UI图是否有差异

今天对比修改了才发现很多细节没有做好

 对UI图的细节还原做到位是多么的重要 

相信这也是前端的基本素养

以后敲代码的时候要认真仔细地去做

慢工出细活