今天完成的事情：

• 基本完成任务四

过程：

HTML设计

如图把整个设计图顶端划分为<header>,底下的表单部分划分为<main>

CSS设计

1. 1. 顶端使用flex,利用justify-bottom="space-between";和调整文字的外边距实现设计效果；
2. 2. 对于手机号码和密码两个输入行内部的布局同样使用flex，对于文本输入框<input>设置flex=1;；其他项目的flex默认为0，因此<input>会占满容器内除了其他项目之外的所有空余空间；
3. 3. 对于输入行图标和文本框之间的竖线使用图标的边框线来达到效果，不需要额外进行竖线的切图（border-right: .01rem solid #eef0f4;）；
4. 4. 输入行的文本框text类型的<input>元素,设置了轮廓线和边框的隐藏(border: none; outline: none;),同时提醒文字通过HTML<input>的placeholder属性实现;
5. 5. 下方的登录按钮是submit类型的<input>,隐藏了边框并且拉伸宽度至100%
6. 6. 最下方“忘记密码”是一个<a>元素,设置了向右浮动。
7. 

参考

FLEX布局- 阮一峰

困难

对于顶端和输入框的元素布局是个小难点，但是用flex就很方便的解决了，以至于我都没考虑过其他实现方法。

同时竖线怎么实现也是查了不少时间，发现利用单条边框是个不错的思路。

明天的计划：

对代码格式进行检查,同时参考一下其他实现方案。