今天完成的事情：

1.写完了task8的三个页面

明天计划的事情：

1.根据师兄的建议修改一下task8

2.写task8的任务总结

3.开始task9，进一步完善一下task8页面的响应式

遇到的问题：

1.在做页面2的大图时出现问题，纠结在直接用img标签把图贴上去还是用图片背景background-image，由于不太理解background-image的使用而且无法保证在宽度变化时图片宽高等比例变化大小，最后决定用img标签。

2.多行文字显示是有时候行与行之间会出现换行错乱和右边不齐，比如：

通过设置text-align: justify;和word-break: break-all;就可以了，如图：

收获：

1.关于background-image、background-repeat、background-position属性的用法

这三个属性一般要配合使用：

（1）background-image 属性为元素设置背景图像，元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。背景图像默认位于元素的左上角，并在水平和垂直方向上重复。根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。初始背景图像（原图像）根据 background-position 属性的值放置。

用法为background-image: url(图片路径);

（2）background-repeat 属性设置是否及如何重复背景图像，背景图像默认地在水平和垂直方向上重复。有以下的属性值：

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承 background-repeat 属性的设置。

（3）background-position 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。background-position有以下的值

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

如果仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。

xpos ypos，第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%，可以混合使用 % 和 position 值。

2.css多行文字换行相关知识

强制换行

      1、word-break: break-all;   只对英文起作用，以字母作为换行依据。

      2、word-wrap: break-word;   只对英文起作用，以单词作为换行依据。

      3、white-space: pre-wrap;   只对中文起作用，强制换行。

禁止换行

      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

文本超出显示省略号  p{text-overflow:ellipsis;overflow:hidden;}

（1）white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 

white-space 属性设置如何处理元素内的空白 

normal 默认。空白会被浏览器忽略。 

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 

pre-wrap 保留空白符序列，但是正常地进行换行。 

pre-line 合并空白符序列，但是保留换行符。 

inherit 规定应该从父元素继承 white-space 属性的值。

（2）word-wrap: normal|break-word; 

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 

normal: 只在允许的断字点换行(浏览器保持默认处理) 

break-word:在长单词或URL地址内部进行换行 

word-break: normal|break-all|keep-all;

word-break 属性用来标明怎么样进行单词内的断句。 

normal：使用浏览器默认的换行规则。 

break-all:允许再单词内换行 

keep-all:只能在半角空格或连字符处换行

3.：before和：after这两个伪类，伪类和伪元素的区别

:before 伪类在被选元素的内容前面插入内容，使用 content 属性来指定要插入的内容。比如：

p:before

{ 

content:"插入内容";

}

:after 伪类在被选元素的内容后面插入内容，使用 content 属性来指定要插入的内容。比如：

p:after

{ 

content:"插入内容";

}

伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

伪类用一个冒号表示比如:first-child，伪元素则使用两个冒号表示比如::first-line。伪元素在一个选择器里只能出现一次，并且只能出现在末尾，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

伪类的例子有：:hover :active :first-child :visited等。

伪元素的例子有：:first-line :first-letter :after :before等。

进度：css任务8

任务开始时间：2018.6.4

预计demo时间：2018.6.8

是否有延期风险：无

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