今天完成的事情：

1.学习html和css代码规范，学习flex布局

2.写header和footer，用position:flex使header和footer紧贴顶部和底部，在header中分别让图片和文本居中，在footer中使用flex布局，通过设置两个框的宽度为100%来实现宽度自适应

html代码如下

<div class="header">
    <img src="images/task5-1.png">
    <h1>个人主页</h1>
</div>
<div class="footer">
    <div class="btn left">留言</div>
    <div class="btn right">电话联系</div>
</div>

css代码如下

html{
    font-size: 62.5%;
}
body{
    margin:0;
    width:100vw;
    height:100vh;
}
.header{
    position: fixed;
    width: 100%;
    height:7.1vh;
    background: #5FC0CD;
}
h1{
    margin:0;
    text-align: center;
    font-weight: normal;
    font-size: 3.2rem;
    line-height: 7.1vh;
    color: #FFFFFF;
}
img{
    position: absolute;
    top: 50%;
    height:3vh;
    margin-top: -1.5vh;
    margin-left: 3.5rem;
}
.footer{
    position: fixed;
    left:0;
    bottom: 0;
    display: flex;
    width: 100%;
    height:7.1vh;
}
.btn{
    width:100%;
    height: 7vh;
    margin-left: 3.7rem;
    margin-right: 2.5rem;
    text-align: center;
    font-size: 3.4rem;
    line-height: 7vh;
    border: solid #5FC0CD;
    border-radius: 10px;
}
.left{
    margin-left: 3.7rem;
    margin-right: 2.5rem;
    color: #5FC0CD;
}
.right{
    margin-right: 2.5rem;
    background: #5FC0CD;
    color: #FFFFFF;
}

遇到的问题：

刚开始的时候想用flex来写header，但是遇到了两个问题：

1.想不出如何用flex实现图片居左，文字居中

2.在父元素中写入display：flex;之后，子元素img的height就自动变成了父元素div的height，为什么会这样？

还麻烦师兄指点一二。

明天计划的事情：

1.再看一下代码规范

2.flex布局中的属性有点多，还要再熟悉一下

3.用flex布局重新写一下header和footer,达到紧贴顶部和底部的目的

4.写一下主体内容

收获：

重新复习了一下垂直居中和水平居中，学习了代码规范和flex布局