今天完成的事情：

1、列表主体部分已经完成。

2、完成底部footer的页脚的制作。

明天还需要调试，用绝对定位来写的，百分比还需要调试，在拉伸移动端的时候没有居中显示。如图：

看起来有点奇怪。

3、完成任务要求中再缩小屏幕时，文字要有省略号来...显示。

我特地去查资料怎么来显示，这里有几个新的属性：

(1)text-overflow属性：规定了当文本溢出包含元素时所发生的事情。

值：ellipsis（省略）：显示省略符号代表被修剪的文本。超出则用...代替。

重点：text-overflow属性可以在文本过长时，在确定的长度内显示，其他的会显示省略号等字符串号，但是这个属性不会影响到标签内的文本内容。

（2）overflow属性：规定当内容溢出元素框时发生的事情。

值：hidden（隐藏）：内容会被修剪，其余内容是不可见的。超出部分的内容会被隐藏。

（3）white-space属性：用来设置如何处理元素内的空白，也可以来规定段落中的文本是否换行，它的值必须设置为nowrap，否则text-overflow属性失效。

值：nowrap（不换行）：文本不会换行，文本会在同一行继续显示，直到遇到<br>标签为止。

注意：text-overflow这个属性必须搭配另两个属性才能一起作用生效。

给包含文本的元素用style.css设置，网页显示的效果如下：

重点是width要设置。

明天的计划：

header头部要有点击效果，明天需要重新设置下。

完后调试后提交任务。

今天的footer用得是绝对定位来写的，明天调试完后有时间的话打算了解下用flex弹性盒子来写，准备研究下怎么用flex来让button里的内容来达到居中的效果。

遇到的问题：

是因为我给类名menu设置了height：40px，所以才会出现这个线条，列表头的height大于我给menu设的高。

解决方法：把height的值删掉就行了。

2、在做footer页脚的时候用button插入background：url，下面还有文字我用p标签来写，后来发现网页上显示的效果文字是竖行排列的，如下图：

这个原因是因为<p>标签的width宽度不够，导致另一个文字被挤到下一行了，不知道为什么老是遇到这个问题，笑~~。

收获：

对于flex弹性盒子只是了解了部分，还不是很全面，对于position的绝对定位原来有很多种写法。