今天完成的事

1.使用ps切除footer中间按钮的标准图片图片

2.为footer添加三个按钮

<h>
    <img src="home.png">
</h>
<h>
    <img src="task5.jpg">
</h>
<h>
    <img src="man.png">
</h>

3.重新修改添加三个按钮

<input type="submit" value="首页" class="h2">
<input type="submit" value="" class="h3">
<input type="submit" value="我的" class="h2 h4">

4.为三个按钮引入样式

<input type="submit" value="首页" class="h2">
<input type="submit" value="" class="h2 h3">
<input type="submit" value="我的" class="h2 h4">

.h2{
    height: 100%;                       /*设置按钮高为footer的100%*/
    margin: 0px;                        /*设置margin为0px 消除默认边距*/
    background: url("home.png") no-repeat center top;
                                        /*插入背景图片 并设置水平居中*/
    background-size: 20px;              /*设置图片大小为40px*/
    font-size: 10px;                    /*设置字体大小为20px*/
    border:solid rgb(248, 250, 251);    /*设置边框为实体线消除阴影 并设置颜色与footer同色*/
}
.h3 {
    width: 60px;                        /*设置宽度为60ps*/
    background: url("task5.jpg") no-repeat center top;
                                        /*插入背景图片 并设置水平居中 */
    background-size: 50px;              /*设置图片大小为74px*/
}
.h4{
    background: url("man.png")   no-repeat center top;
                                        /*插入背景图片 并设置水平居中*/
    background-size: 20px;
}

5.设置三个按钮的放大比例来排列三个按钮的位置

flex-grow: 3;                     /*设置显示放大比例来排列三个按钮*/

6.给左右两个按钮添加上外边距

margin-top: 20px;                   /*设置上外边距为20px*/

7.放弃使用bootstrap 修改header按钮组代码

<input type="button" value="找雇主">
<input type="button" value="找护工">

8.为按钮组引入样式

.button {
    float: left;
    border: 1px solid green
}

明天的计划

1.修改header按钮组

2.添加列表页的内容 

3.尝试使用雪碧图

遇到的问题

1.对图片的设置要在引入或者插入图片之后才生效 而不是之前

错误的

background-size: 10px;              /*设置图片大小为10px*/
background: url("task5.jpg") no-repeat center top;
                                    /*插入背景图片 并设置水平居中 */

正确的

background: url("task5.jpg") no-repeat center top;
                                    /*插入背景图片 并设置水平居中 */
background-size: 10px;              /*设置图片大小为10px*/

2.使用display: inline-flex;排列时 经常产生不知从何而来的边距

收获

继续巩固之前的知识