今天完成的事：交接完项目的事，准备了下毕业论文，从任务一开始总结了下。

明天计划的事：继续总结和写毕业论文。

困难：总结起来感觉好多啊，估计搞玩时间蛮长。

收获：（写一点总结，是按验收标准和深度思考来的）

一、任务1--九宫格

验收标准：

1.还原设计图：保证做出的小格子圆角、颜色和设计图一致；

这个任务是我第一次接触到HTML和CSS，也是前端学习中最基础的东西。而还原设计图这个要求，是贯穿着所有的任务始终的，拿到设计图的第一时间，就应该去思考一个大体的实现框架，再去实现和完善。

在任务一中，首先看到九个格子整体居中且始终占满屏幕的，每个格子中间有空隙且高宽始终相等，颜色可用PS取色，圆角应该用border-radius来设置。

2.自适应：调整浏览器的宽度不会出现滚动条，小格子会随着窗口宽度大小变化，不会变形；

看到自适应我首先想到百分比单位，但是高度是由内容撑起的，所以给高度设置百分比是不会有效果的，故而考虑用vw、vh、vm这些视区（“视区”所指为浏览器内部的可视区域大小）相关的单位，vw是相对于视窗的宽度（视窗宽度是100vw），vh是相对于视窗的高度（视窗高度是100vh），vm是相对于视窗的宽度或高度中更小的那个。最后我选用vw这个单位，因为任务要求的是浏览器的宽度不会出现滚动条。

3.移动端：在模拟手机查看时也能保证九宫格宽度等同屏幕宽度；

4.编码规范：文件必须用UTF-8编码

<meta charset="UTF-8">  

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

3、4条一起，是上面那两行常用的代码。首先说第4条‘UTF-8’编码，它是用来告诉浏览器我的文件是UTF-8编码的，用它的最简单的好处就是基本上是windows操作系统都支持这种编码，而且大部分也能很好的解析，且utf-8编码能够让老程序（不支持Unicode）处理，因为utf-8的编码表示在0-127，与ACSII的范围相同。再说第3条，这个就是后面常加上去的一句，width：可视区域的宽度，值可为数字或关键词device-width，intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。