今日完成的事情：为主体内容的下半部分布局，注意在不同分辨率下布局不被破坏，且文字始终垂直居中，调试代码，使得页面在不同分辨率不同设备上都能正常显示，查看学习资料——《CSS代码规范》，根据代码规范优化自己的代码，完成任务5，并上传到服务器，开始做任务6，为任务6切图，查看学习资料——《CSS Sprite雪碧图》，将需要用到的小图标制作成雪碧图在之后使用。今天还学习了CSS的背景属性。

Background：background 简写属性在一个声明中设置所有的背景属性，background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment、background-image。

background-color ：设置元素的背景颜色，设置的背景颜色是纯色，这个颜色会从内容填充到元素的border，但不会填充margin。如果border是透明的（如虚线框），就会透过这些透明的部分显示出背景色。默认值为transparent，背景颜色为透明。

background-position：设置背景图像的起始位置。默认值为：0% 0%，第一个值是水平位置，第二个值是垂直位置，如果仅设置了1个值，另一个将是50%。

background-size：规定背景图像的尺寸。它的值有：

length：第一个值设置高度，第二个设置宽度，可以是像素或百分比，如果只设置1个值，第二个默认为“auto”。

Percentage：以父元素的百分比来设置背景图像的宽度和高度，通length一样，只有1个值时另一个为“auto”。

Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图片的某些部分也许无法完全显示。

Contain：把背景图片扩展至最大，可以使其高宽完全适应内容区域。

background-repeat ：设置是否及如何重复背景图像。默认背景图像在水平和垂直方向上重复。从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。它的值有：

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

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

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

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

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

background-origin：规定 background-position 属性相对于什么位置来定位。如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。它的值有：

padding-box：背景图像相对于内边距框来定位。

Border-box：背景图像相对于边框盒来定位。

Content-box：背景图像相对于内容框来定位。

background-clip：规定背景的绘制区域。它的值有：

border-box：背景被剪裁到边框盒。

padding-box：背景被剪裁到内边距框。

Content-box：背景被剪裁到内容框。

background-attachment ：属性设置背景图像是否固定或者随着页面的其余部分滚动。

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

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

Inherit:规定应该从父元素继承 background-attachment 属性的设置。

background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。它的值有：

Url:指向图像的路径。

None：默认值，不显示背景图像。

Inherit：规定从父元素继承background-image属性的设置。

Inherit：规定从父元素继承background属性的设置。

明天的计划：继续做任务6，首先布局header，让header紧贴顶部，布局列表头，让列表头紧贴header，然后布局footer，让footer紧贴底部，布局列表主体部分，高度始终在列表头和footer之间，超出部分自动出现滚动条，给header添加居中的按钮组，居右的图标按钮。分享小课堂。

遇到的问题：没什么大问题，任务5设置flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，，该项目将缩小。设置为0时就固宽。

收获：同上。