今天完成的事情：

1.完成了任务四。效果如图：

2.又重新看了一遍ps切图，发现之前对这个的了解有点囫囵吞枣，现在体会更加深刻。

明天计划的事情：

1.再熟悉一下任务四中用到的flex布局和input指令。

2.开始尝试任务五。

遇到的问题：

1.html里img插入图片和css里用background插入图片有点不太一样，此处使用background。

2.margin和padding布局，实际体现出来的效果和想象中的效果有时候不同，需要仔细查看这个盒子的结构，

收获：

1.background-image是背景图片，是css的一个样式，不占位，<img />是一个块状元素，它是一个图片，是html的一个标签，占位。

2.PS切图如果自己手动去切，去测量图片的尺寸，稍显麻烦。可以使用插件，如2019版的CC有将图层导出到文件的脚本，也可以使用其它插件，比如蓝湖。

将当前文件上传后可以在web端直接操作，

哪里不会点哪里，尺寸一览无余。配合自带脚本，可轻易切出想要的图。

3.使用自适应时，需要在head里添加

<meta name="viewport" content="width=device-width, initial-scale=1"/>

含义为，宽度即为设备宽度，初始比例为1。

4.<a>标签href链接时，加入target="_blank"，可点击链接后打开新的网页，原网页不关闭。

5.细节部分：

Outline：none，使用input指令加入密码框时会出现边框，此命令可消除边框。

使用链接指令时，文字下方会有下划线，Text-decoration:none指令可以去掉下划线。

6.设为 Flex 布局以后，子元素的float属性将失效。

7.苟利国家生死以，岂因祸福避趋之。