今天完成的事情：

1、task8第二个页面完成。

2、task8第三个页面写了一部分。
明天计划的事情：

1、完成task8的所有页面以及深度思考。

2、开始task9。 

遇到的问题：

1、task8的第二个页面中我开始认为需要利用框架iframe属性，可是仔细看了师兄和官网的代码，我发现大家还是使用的bootstrap的栅格布局，通过点击左边的导航栏在右边获得相应内容，这个可能需要Angluar框架或者‍‍sitemesh，这些也没有接触到，所以只是在右边写出了土豆网的相关介绍内容。
收获：

1、关于背景的方面的有关属性。

 CSS background-image 属性

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

url()——指的是背景图片的路径。

background-repeat 属性设置是否及如何重复背景图像。

 默认地，背景图像在水平和垂直方向上重复。

background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

它的值有：

repeat——默认，在水平和竖直方向平铺。

repeat-x——背景图像在水平方向平铺。

repeat-y——背景图像在竖直方向平铺

no-repeat——背景图像不平铺，只出现一次。

background-position 属性设置背景图像的起始位置。

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

默认值：0% 0%。

这个值可是是关键词|百分数|数值。

你想背景图片水平垂直居中，background-position：center 50%；这样也是可以的。

CSS background-attachment 是css软件的一种属性。属性设置背景图像是否固定或者随着页面的其余部分滚动，所有浏览器都支持 。

值：

scroll——默认值背景图像随着页面其余部分的滚动而移动。

 fixed——当页面的其余部分滚动时，背景图像不会移动。

一般是在有页面出现滚动条时，才会使用background-attachment属性。

background-size 属性规定背景图像的尺寸。

语法：background-size: length|percentage|cover|contain;

auto：

默认值，不改变背景图片的原始高度和宽度；‍‍

length：

设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"即按照图片的宽高比进行缩放。

percentage：

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

cover：

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain：

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-size： contain 与cover的区别：

作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同之处在于：

1.  在no-repeat情况下，如果容器宽高比与图片宽高比不同，

　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉，可能会导致图片不会完全显示，除非容器的宽高比与图片的宽高比相同，；

   　contain:   图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

PS:其实，从英文的意思来说：cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当，contain意为“包含”--也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，你必须把我显示完整、不能裁剪我一丝一毫~

2.  在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

2、关于CSS的几个伪类

:link 与 :visited 在样式文件中的顺序可以随便放置。

而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。

:focus -> :hover -> :active

有些人可能会困惑，为什么必须要按这样的顺序，而不能打乱呢？ 其实他们每一个选择器都代表一个含义。

:link-——代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。

:visited——代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式

重点是下面这几个：

:focus ——代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，这个我们可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式

:hover——代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，因为hover排在后，会覆盖focus样式。

            如果:hover排在前，:focus排在后，则当光标获得焦点时显示:focus的样式，但当光标经过链接时，样式并未显示:hover的样式，而是继续是:focus的样式，因为应用的focus样式在hover之后，覆盖了前面的样式。

:active—— 代表元素被激活时的样式，也就是元素被按下时的样式，如果:active选择器与 :focus , :hover 调换位置，则显示的效果也会不同，因为排在后面的样式，会覆盖前面的样式。

3、text-indent 属性规定文本块中首行文本的缩进。

它的值可以是数值也可以是%。

在task8的第二个页面中出现段落需首行缩进。在对于段落来说设置text-indent:2em；代表段落首行缩进两个字符。