今天完成的事情：

一、将Footer固定在浏览器底部。

方法一：

#footer{

　　position: fixed;

　　right: 0;

　　left: 0;

　　z-index: 999;

　　bottom: 0;

　　margin-bottom: 0;

}

方法二：

<footer class="footer">

      <div class="container">

        <p class="text">111111111111</p>

      </div>

</footer>

下面是css：

html {

  position: relative;

  min-height: 100%;

}

body {

  margin-bottom: 60px;

}

.footer {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 60px;

  background-color: #f5f5f5;

}

.container {

  width: auto;

  max-width: 680px;

  padding: 0 15px;

}

.container .text {

  margin: 20px 0;

}

资料来源：https://www.cnblogs.com/MarchThree/p/6240654.html

二、background-size中，100%和cover的区别。

https://blog.csdn.net/wzj2584454/article/details/78100233

三、CSS 给图片或背景图片加遮罩

一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，需要再创建一个div作为其子div,然后设置子div的背景颜色。

方法一：

.wrap{

    position: relative;

    background: url() no-repeat;

    -webkit-background-size: 100%;

    background-size: 100%;

} 

.warp-mask{

    height:100%;

    width:100%;

    background: rgba(0,0,0,.4);

}

html:

<div class="banner">

    <div class="shade"></div>

</div>

方法二：

.wrap{

    position: relative;

    background: url() no-repeat;

    -webkit-background-size: 100%;

    background-size: 100%;

}

.wrap-mask:after{

    position: absolute;

    top: 0;

    left: 0;

    content: "";

    background-color: yellow;

    opacity: 0.2;

    z-index: 1;

    width: 100%;

    height: 100%;

}

html:

<div class="banner">

    <div class="shade"></div>

</div>

资料来源：https://blog.csdn.net/GrootBaby/article/details/86536064

https://www.cnblogs.com/changanyeweiyang/p/10028714.html

明天计划的事情：继续完成task5，优化代码。

遇到的问题： 1、用css导入背景图，不显示，图片宽高显示为0。解决方法：给块级元素写背景图片要设置元素的高度，如果没有设置宽度的话，块级元素默认是整个页面宽度100%。行内元素貌似是不能通过background-image:url（）;来设置背景图的。

2、图片的遮罩层在最上面，把字体也遮住了。解决办法：加一个div坐遮罩层。

3、一天基本都在做这个任务，每遇到一个问题都要查询相关资料，效率太低了。

收获：很多知识点分开能理解，合起来应用时，很多都不清楚，通过完成任务五的过程中，更加明显的反映出这个问题，在写每一个部分时，都学习到了很多东西。