今天完成的事情，讲小课堂，上传视频，任务7投票页内容部分。

遇到的问题1,。

倒三角部分，我把它切图了，设置背景颜色就离上面有些距离。换了一钟办法去做，用边框样式设置圆角属性。

然后设置margin去顶住左边。

.Triangle{

    background: #29bde0;（父级设置背景颜色宽度）

    width: 100%;

}

.Triangle-one{

    border-left: 5px solid transparent;（css写倒三角）

    border-right: 5px solid transparent;

    border-top: 10px solid #b9e9f5;

    width: 0px;

    margin-left: 40px;（拉伸时顶住形状）

}

遇到的问题2

玩家页面的内容，看得有点呆，感觉很复杂。之前做任务5-6时间长了，就想把水民与一号，写进一个盒子里，用不同的选择器

，但是那样得话让两个内容在一个盒子里面一上一下。后面师兄跟我说按照任务1的办法做，我想得太复杂了，就总想去想着如何falx垂直。没想到写两个盒子，直接设置就行了。想得太复杂了。

.people{（设置水民盒子大小）

    width: 5rem;

    height: 4rem;

    background: #f5c97b;

    text-align: center;

    color: #746c5d;

    border-top: 2px solid #fff;

    border-right: 2px solid #fff;

    border-left: 2px solid #fff;

    line-height: 400%;

}

.people-one{（设置一号盒子大小，此后要在这里写入hover效果）

    width: 5rem;

    height: 1.5rem;

    background: #83b09a;

    text-align: center;

    color: #fff;

    border-left: 2px solid #fff;

    border-right:2px solid #fff ;

    border-bottom: 2px solid #fff;

}

                                                                   小课堂师兄提问

任务1的九宫格还有几种做法？

1，flax布局

2，浮动

3，绝对定位

什么是文档流？

文档流就是指，我们打开一个网页，网页布局的内容就属于文档流。

html里面的块级元素与行内元素组成。

它们以自己的方式去排列布局，div4本应该正常排列的，我们设置了属性打破了正常的排列顺序，并不占据空间了，就叫脱离文档流。

div1            div4

div2

div3

垂直居中几种方式实现？

flax布局中的  align-items: center;

行高 line-height: 400%;

 display: inline-block;设置成行内块状元素

今天的收获，第一次讲小课堂，发现这样的方式自身收获很大。边框样式制作梯形与三角形。

明天计划用hover写投票页面，感觉hover会很难。