今天完成了什么：

完成任务8底部名片和底部部分

遇到了什么问题：

布局结构问题。开始是container下面的div col-lg-3 col-md-6 col-12不知道是怎麽處理好因爲名片个个都要横排处理，一时蒙圈，后面也是一个个试出来的才达到理想效果，可能这个还是不太懂要怎么布局。

给优秀学员展示水平垂直居中的时候试了下弹性盒子达不到理想效果，后面用margin：0 auto来让它居中。

然后给装在图片的盒子添加了弹性盒子和flex-direction：colum是它居中改变方向，然后配合align-items：center；

一开始发现所有头像都是紧挨在一起，后面通过col-lg-3来使得解决。在弄头像的时候看到不知道怎么弄圆形，查了下资料还是那样border-radius: 50%直接搞定。

然后发现文字紧挨着盒子，查看后才知道没给文字设置宽，导致无法垂直水平居中。

发现在手机情况下名片是紧挨着的，所以我用媒体查询给予它们合适的margin让他们分开。后面发现装在的盒子每个都是有阴影的，所以用了给了边框和阴影

图片盒子阴影调节还存在部分问题，明天再来研究下。弄小圆点的时候也是出现了盒子在最左边的情况下最后发现col-12可以解决然后给了盒子marigin：0 auto去解决居中问题，在媒体查询也做了居中适配

同样又会到第一个问题了，一看到底部友情链接和很多小标签不知道怎么去布局了。好像隐约觉得不是不会居中，是结构理不清楚，这个盒子怎么放放到哪个div下面之类的问题。才导致结构一直不对。

收获了什么：

布局结构很重要，放错位置很麻烦。

使用用CSS剪切圆形图片：

正方形图片

一个百分百正方形的img标签要变成圆形的只需要一行CSS代码。这个技巧在正方形图片上使用的最方便。

HTML

CSS

.img{

    border-radius:50%;

}

通过设置img标签的所有的border-radius属性为正方形宽/高的50%，我们就可以把这个img标签变成圆的。

长方形图片

长方形图片会稍微有一点技巧一点，实际上也是让他转成正方形然后圆形即可。

去渲染一个圆形，必须以圆形图片为基础

要解决这个问题，我们可以通过在img标签外面套一层div，然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。

为了能够让照片的主题不要被裁掉，我们必须要区别对待水平和垂直方向的图片。

对于垂直方向上的图片的主题在垂直方向的中心的假设当然也不适用于每一个垂直方向上的图片。

和水平方向的图片类似，外层div的宽度和高度最好等于垂直方向图片你的宽度，这样的话可以产生最好的效果。

对于垂直方向的图片，我们把宽度设置为100%，高度设置为auto（和水平方向的图片相反）

.circular--portrait{

    position:relative;

    width:200px;

    height:200px;

    overflow:hidden;

    border-radius:50%;

}

.circular--portrait img{

    width:100%;

    height:auto;

}

CSS中用来负责把图片变圆的属性是border-radius，把边的圆角变成高度/宽度的50%就可以产生一个圆

明天计划：

临时有事，请假一天