一、今日完成的情况

      1、写任务六代码，昨天编写的代码太冗肿了，修改起来也很困难，直接推翻了，重新用列表标签写了一遍。

      2、学习Boostrap框架和ul、li列表样式的知识。

二、明天的计划

       1、完善优化代码，总结任务六学习到的知识。

       2、查看深度思考，试着总结总结。 

       3、查看任务7涉及到的知识，准备开始任务7。

三、遇到的问题

      1、之前写的代码，没有用列表样式，今天修改起来很费解，达不到还原设计图的要求。

            解决办法：学习了列表样式以后，布局就容易了不少，删掉原先的代码，重新编写了代码，基本符合了设计图的样式。

      2、header和footer使用position: fixed时，没有效果，甚至整个footer都消失了。查了查网上的资料，可能是因为父元素有一个 transform 属性，导致fixed失效，也可能是父元素的 -webkit-overflow-scrolling 属性值为 touch，子元素的 position: fixed 属性就无效。 但我的父元素里并没有这两种属性，想了想是不是优先级的问题，就用z-index: 1来提高它的优先级，还是没有用。

            解决办法：最后查到了position:fixed要和top:0与bottom:0配合使用才可以达到固定在顶部和底部的效果。

      3、没明白任务步骤第14点：“制作列表主体，注意垂直居中，如果屏幕过窄时，设置左边的文字被截断出现”…”省略号”。这个的意思是什么。后来询问师兄后得以解决，第14点的意思即是屏幕过小时，左边被遮挡的文字以省略号的形式展现出来。

            解决办法：设置多余的文本显示省略号：给文本所的标签元素设置一个宽度值，并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"elipsis"，即可显示为省略号。（white-space: nowrap；overflow: hidden；text-overflow: ellipsis;。）

四、收获

      1、学习了列表的相关知识。1>.在HTML中，有两种类型的列表：（1）无序列表 - 列表项标记用特殊图形（如小黑点、小方框等；                 （2）有序列表 - 列表项的标记有数字或字母。 2>.基本属性：（1）background-image: url(文件.gif);表示引用的图片文件；（2）background-repeat: no-repeat;设置图像的URL，并设置它只显示一次；（3）background-position: Xpx Ypx;引用的图像的位置。

      2、初步学习了Bootstrap的基本知识，了解到它是一种Web框架，丰富了很多样式，让页面变得更好看，今天简单的把框架下载到本地，导入到任务文件夹的目录里，可以用link标签来引入，也可以直接引用网BootCDN 等网络上的库。

任务进度：

任务六

任务开始时间：

2018.04.28

预计任务完成时间：

2018.04.30

禅道：http://task.ptteng.com/zentao/project-task-654-unclosed.html