今天完成的事情：

1.写了任务三的网页介绍页面。示意图和代码如下：

<header>
<div class="pic1"></div>
</header>

<main>
<div class="pic2"></div>
<p class="content"> 葡萄藤轻游戏专注于棋牌领域，提供在线发牌服务，多种线下真人对殴游戏，提供碰瓷教学。</p>
</main>

<footer>
<div class="phone">
<div class="pic3"></div>
  <p class="content">110</p></div>
<div class="box">
<div class="pic4"></div>
  <p class="content">快打啊</p></div>
</footer>

body{background-color: #68cdd5;
    font-size: 62.5%;
    margin:0 1em;
    padding: 0;}

header{padding: 0 2%;}

.pic1{background:url("返回.png")no-repeat;
    margin-top: 2em;
    width: 5em;
    height: 5em;
    background-size: cover}

main{margin-top: 1em;
    padding:0 10%;}

.pic2{background:url("整合logo.png")no-repeat;
    width: 10.5em;
    height: 4em;
    background-size: cover;
    margin: 0 auto;}

main .content{
    font-size:1.5em;
    color: white;
    font-family: serif;
    text-align: center;
    margin-top:5em;}

footer{display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    margin-top: 10em;
    padding: 0 12%;}

.phone{margin: auto;
    width: 4em;
    height: 4em;}

.box{margin: auto;
    width: 4em;
    height: 4em;}

.pic3{background:url("联系电话.png")no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%; }

.pic4{background:url("葡萄藤logo.png")no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;}

footer .content{
    color: white;
    font-size:1.1em;
    font-family: serif;
    text-align: center;}

明天计划的事情：

1.明天完善任务3，再巩固一下学到的知识。加油

遇到的问题：

1.关于插入图片，最开始是在html body里面使用img scr命令，不过页面较长，后面百度一下，进行参考后选择在CSS里插入，设置一些参数也比较直观，不必全部堆在html里。但感觉写的还是有点长。

2.页面最下面两个图标的排列，最初想使用浮动，昨天也用浮动写出了大概效果，不过加入文字后会有些许变化。后面参考了一下，改用flex命令。

收获：

1.background size :{100% }; 图片大小按容器比例撑满，图片变形 ，

    background size :{cover };把背景图片放大到适合元素容器的尺寸，图片比例不变。 

我选择使用了cover。

2.CSS中单位px，em和rem的区别。暂时明白了一些，em的值不是固定的，它会继承父元素字体的大小。

3.使用了flex的一种布局，展示效果如下：

display: -webkit-flex;
    display: flex;
    justify-content: space-between;

理解不算特别好，还需加强。