今天完成的事情：

1.完成任务7

2.背景图的可以放置多个

  background{url(路径/图片名称.png) no-repeat， ①

                      url(路径/图片名称.png) no-repeat， ②

                     url(路径/图片名称.png) no-repeat；} ③

  需要注意的是因为添加了逗号作为分隔符，每个逗号之前或之后的内容都会作为单独的性值而应用，所以在每个逗号之后都要添加一次no-repeat。然后

  background-position{40% 50%    ①，45% 50%   ②，50% 50%；   ③}

  这里需要注意的是，因为同样采用逗号作为分隔符，所以每个的定位都要写一次，同时需要注意顺序问题。Background-position要和background的图片顺序对应起来，

     background{ url(…) ① →background-position{ 40% 50%   ①

     background{ url(…) ② →background-position{ 45% 50%   ②

     background{ url(…) ③ →background-position{ 50% 50%   ③

  不然的话背景图像会无法正常显示出来。

3.遇到各种不居中的问题翻看了一下felx的几个常用布局：

lex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: column-reverse： column-reverse：|  column：| row | row-reverse：}

它可能有4个值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在布局投票界面的时候想着是lex-direction：column;配合justify-content:space-around;来使用但是失败了没有效果，不知道两个f属性能不能一起来使用

明天计划的事情：

开始任务8

遇到的问题：

1.使用flex来进行垂直居中

2.

放入了头部标签进行定义还是没有效果不知道那出问题了