今天完成了什么：

完成第一张图；

遇到了什么问题：

1图片和词不会居中，研究后使用弹性盒子和justify-content：space-between；和align-items：center；一开始没居中，师兄指导后才知道需要添加个空的div并且设置跟图片相同的外边距才使得居中；然后发现文字跟原稿不一致，才知道需要用中文的冒号；

2添加简化版盒子样式后发现跑下面来了然后想起弹性盒子以及水平垂直居中就添加上去可以了，

3一开始盒子不随分辨率而变化，才知道没用百分比去表示自适应。

4，制作三角形的时候把三角形样式写进了猜词版的盒子里。弄了浮动和定位后还是无法调节，需要修改的东西好像很多，再仔细分析下了布局结构，才知道三角形是脱离于盒子布局的。所以用了position：fixed脱离文档流，用ltrb值才使还原原稿样式。

5.在做底部小圆型的时候把：hover给错盒子，琢磨了下才改过来：hover应该给予父元素而不是子元素。

小圆型虽然做出来了但是发现是在底部垂直的，才想起给他的父元素盒子添加弹性盒子水平垂直居中样式。

收获了什么：

这次页面写的是最顺手一次，加深了对居中、绝对定位相对定位和浮动以及弹性盒子的用法，对属性更加了解。

学会使用小圆型制作代码，当然不能靠复制，还是要去理解，万一面试让你写三角形圆形代码说复制下就尴尬了，另外更深的认识了自适应要经常配合百分比显示，现在看到布局会有点思路，不像以前任务盲从。

接触了下禅道确实是比较清楚分工和了解自己的任务进度，一开始是往大了估算，毕竟知道自己几斤几两。

小圆形代码：

.circle{width: 0.9rem;

   height: 0.9rem;

     background: #f0f0f0;

     margin-left:1rem;

   -moz-border-radius: 50px;

   -webkit-border-radius: 50px;

  border-radius: 50px;}

另外无意间搜索到了个切图的神奇，先打开ps点窗口-工作-加载动作，把下载的文件加入进去。然后用移动工具选中需要的图层，然后按f2再按f3即可切出图片。

百度云链接:https://pan.baidu.com/s/1TLm6z_tj1Yef9ErWXr-SYQ

原文链接：

明天计划：

完成第二张原稿，更仔细拆分禅道。