发表于: 2018-10-28 22:19:48

1 690


  1. 今天完成的事情:

  2. 1.完成任务7

  3. 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的几个常用布局:

  4. 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属性能不能一起来使用

  5. 明天计划的事情:

  6. 开始任务8

  7. 遇到的问题:

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

  9. 2.

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


返回列表 返回列表
评论

    分享到