今天完成的事情：

1、任务八页面一完成了，还有些细节需要修改。

2、页面二完成一半。的header和footer与页面一是一样的，做起来很快。但垂直居中还要想想办法，卡着了。

明天的计划：

1、完成页面二。

2、完成页面三。

遇到的困难：

1、没遇到特别的困难，都是一些小坑，PC端的细节好多···。

2、居中的问题。

用弹性盒子，给他们水平方向和垂直方向居中，他们会沿着轴线方向居中，不能按照小圆圈的垂直方向居中，因此我的思路是要将弹性盒子的Y方向的轴线偏到小圆圈上来就能居中了。明天按着这条思路继续尝试。

收获：

1、各种垂直居中的方法。

方法一 
这个方法让一些<div>显示成table，然后我们就可以利用table的vertical-align属性了（vertical-align作用在其他一些元素上会表现得非常不一样)。

Html代码  

1. <div id="wrapper">  
2.     <div id="cell">  
3.         <div class="content">Content goes here</div>  
4.     </div>  
5. </div>  

Css代码  

1. #wrapper {  
2.     display: table;  
3. }  
4.   
5. #cell {  
6.     display: table-cell;  
7.     vertical-align: middle;  
8. }  

优点： 
1、内容可以动态地改变高度（不用在CSS里定义）。 
2、空间不够的话内容不会被截断。 
缺点： 
1、不支持IE（即使是IE8 beta）。 
2、多余的标签（没那么糟，看你自己怎么认为）。 

方法二 
这个方法会用到一个top设为50%、margin-top设为内容高度的一半、绝对定位的div。这意味着它必须有一个固定的高度，这是在CSS里定义的。 
因为它的高度固定，你可能想要给它设置overflow:auto;，这样如果内容太多的话就不会溢出而是会出现滚动条了。

Html代码  

1. <div id="content">Content goes here</div>  

Css代码  

1. #content {  
2.     position: absolute;  
3.     top: 50%;  
4.     height: 240px;  
5.     margin-top: -120px; /* negative half of the height */  
6. }  

优点： 
1、支持所有的浏览器。 
2、不需要额外的标签。 
缺点： 
1、如果空间不够的话，内容就会消失（例如当div在body里面而用户缩小浏览器时，就不会出现滚动条）。 

方法三 
在这个方法中，我们会在内容元素上方插入一个div，这个div会被设置成height:50%;margin-bottom:-contentheight/2，然后内容元素会因为清理浮动而居中了。

Html代码  

1. <div id="floater"></div>  
2. <div id="content">Content here</div>  

Css代码  

1. #floater {  
2.     float: left;  
3.     height: 50%;  
4.     margin-bottom: -120px;  
5. }  
6.   
7. #content {  
8.     clear: both;  
9.     height: 240px;  
10.     position: relative;  
11. }  

优点： 
1、支持所有的浏览器。 
2、如果空间不够的话（例如缩小浏览器）就会出现滚动条，所以我们的内容不会被截断。 
缺点： 
1、我唯一能想到的就是需要一个额外的空元素（这其实没那么糟，看你自己怎么认为）。 

方法四 
这个方式使用一个绝对定位且固定宽高的div，接着这个div被要求拉伸到top:0;bottom:0;，它因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。这个方法类似于常见的使用margin:0 auto;来让块状元素水平居中。

Html代码  

1. <div id="content">Content here</div>  

Css代码  

1. #content {  
2.     position: absolute;  
3.     top: 0;  
4.     bottom: 0;  
5.     left: 0;  
6.     right: 0;  
7.     margin: auto;  
8.     height: 240px;  
9.     width: 70%;  
10. }  

优点： 
1、简单。 
缺点： 
1、不支持IE（但支持IE8 beta）。 
2、空间不足的话内容会被截断，不会出现滚动条。 

方法五 
这个方法只会居中一行文字。只需要设置line-height等于目标对象的高度，然后文字就居中了。

Html代码  

1. <div id="content">Content here</div>  

Css代码  

1. #content {  
2.     height: 100px;  
3.     line-height: 100px;  
4. }  

优点： 
1、支持所有的浏览器。 
2、空间不足时不会被截断。 
缺点： 
1、只能用在文本上（不能用在块状元素上）。 
2、如果超过一行的话（例如换行）就失效了。 

进度：task8

任务开始时间：2018.5.18

预计结束时间：2018.5.25

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-697.html