一、今天完成的任务：

1、任务7第一个页面的编写

成果如下：

2.第二个页面的切图和部分结构代码的编写

 由于完成的不多就不贴图了

二、明天的计划

1.完成第二个页面代码

2.第三个页面的代码至少要完成一半

三、遇到的问题及思考

1、

在做第一个页面的时候，需要画一个三角形，之前自己想的方法是，先做一个旋转45度的盒子，

然后用另一个盒子遮住第一个盒子的一半，第一个盒子剩下的部分不就是三角形了？

自己这个方法确实可行，而且也做出来了 ，但感觉不是最简单的方法，又很占位置，于是百度了好点的方法，一开始还没看懂。

代码是这样的：

 就没想明白，为啥随便这么简单的5行代码就画出了一个三角形。

 研究以后，发现了一个之前被忽略的问题，border是什么样子的？比如下面这个图。

盒子是红色，下border是橙色，

如果再给一个右border绿色，那么右下角该怎么算？是空着呢？

是算橙色还是算绿色？

猜是没用的，直接试一试，结果如下：

 居然各占一半。

试到这里，我才明白了，那个5行代码是如何实现做出一个三角形的。

先给border宽度和颜色,再让盒子宽高为0，这样我们能看到的东西实际上就是那四个边角组成的，

 调整不同border的颜色就可以实现不同方向的三角形了。 

2、

设置主体部分时，发现高度怎么弄都不符合ui图，

审查元素以后，发现字体自带行高，于是设置line-height等于字体大小以后，

解决问题。

四：收获

第一个界面其实没啥新东西，主要收获就是对结构的布局更加合理了，代码更熟练了，

然后就是对borde的结构理解更透彻了。