今天完成的事情：

重做完了任务6。

让文字超过div宽度时自动隐藏并显示省略号

css样式表：

p{

    width: 50px;  /*必须设置宽度*/

    overflow: hidden;  /*溢出隐藏*/

    text-overflow: ellipsis; /*以省略号...显示*/

    white-space: nowrap;  /*强制不换行*/

}

明天的计划：

如果任务6通过，就开始任务7.

遇到的问题： 

问题1：如何去掉按钮之间的空

原因：HTML中内联元素之间的回车换行符占字节数。可以用浮动或块状解决。

解决方法：HTML的按钮代码之间取消换行，使两个按钮在同一行。

<button>找雇主</button><button>找护工</button>

问题2：如何让图标显示在文字的上方

解决办法：

第1步 html中的文字前加上<br>换行符

1. <div class="home-page"><br><br>首页</div>

第2步 此div的样式中将图标作为背景图片导入，并调整大小和显示方位

.home-page {

    font-size: 2vw;

    color: #5fc0cd;

    left: 22vw;

    background: url(images/home_page.png) no-repeat;

    background-position: top;

    background-size: 4vw 4vw;

}

收获：

以为今天做不完任务6，没想到做完了。Bootstrap的麻烦之处就是自带的媒体查询中设置了几个外边距和内边距参数，使用bootstrap的过程中重写一下相应的样式就行。