今天完成的事情

做了任务十三的前两个页面，还是碰到很多问题，第二个页面还需修改

明天计划的事情

尽量完成任务十三

遇到的问题

1.正方形框开始没设高，是靠里面水民和1号撑起来的，左浮动后布局全乱了，要用清浮动，搞不清楚给哪里用，试了好半天给整个部分的父元素结束前加了个空div设了clear:both就好了

2.正方形盒子屏幕一拉伸就变成矩形了，之前做的也是这样，最后给父元素设了等宽高vw vh，水民站高80%，1号高占20%，拉伸就不会变化了。

3.底部设了固定定位后，滑动鼠标，总感觉很奇怪，因为背景色和body的背景色一致，所以觉得没必要给底部设背景色，最后加了背景色感觉好多了

收获：

1.倒立三角，开始用的是图片定位，最后用了被人给的气泡框代码样式，在父元素后面加了伪类

.second:after{

    content:'\00a0';

    width:0;

    height:0;

    display: block;

    border-style:solid;

    position: absolute;

    border-width:10px;

    border-color:#b9e9f5 transparent transparent transparent;

    /*z-index:-1;*/

    top:124px;

    bottom:-30px;

    left:50px;

}

2.看了移动端有哪些常见布局方式的文档。

1>.固定布局。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

2>.流动布局。与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。。

3>.bootstrap布局。主要是栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比， 在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。

4>.媒体查询+REM布局。使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem可以实现移动端的响应式

 5>.flex布局。也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局

3.对vh和vw有了一点概念，是视口的高度和宽度，整个页面可以看作是100vh和vw，定宽高的话可以实现自适应