今天完成的事情：

完成任务7开始任务8

1遇到新的知识点图片轮播

    将要展示图片横排放在一个图片容器里面

    在图片容器外再加一个展示容器，展示容器大小为图片大小

    给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值

注意事项

      动画效果分为切换和停留两部分

自定义动画阶段与图片数量相关

动画各阶段偏移值与图片大小相关

1. 2总结一下常见的页面布局

左列定宽，右列自适应

利用float+margin实现

.left{float:left;width:100px;}

.right{margin-left:100px;}

使用table实现

.parent{display:table;table-layout:fixed;width:100%;}

.left{width:100px;}

.right,.left{display:table-cell;}

使用flex实现

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

利用右侧容器的flex:1，均分了剩余的宽度，也实现了同样的效果。

而align-items 默认值为stretch，故二者高度相等

一列不定宽，一列自适应

利用float+overflow实现

.left{float:left;}

.right{overflow:hidden;}

利用table实现

.parent{display:table;table-layout:fixed;width:100%;}

.left{width:0.1%;}

.left,.right{display:table-cell;}

利用flex实现

.parent{display:flex;}

.right{flex:1;}

两侧定宽，中栏自适应

利用float+margin实现

.left{width：100px;float:left;}

.center{float:left;width:100%;margin-right:-200px;}

.right{width:100px;float:right;}

利用table实现

.parent{width:100%;display:table;table-layout:fixed}

.left,.center,.right{display:table-cell;}

.left{width:100px;}

.right{width:100px;}

利用flex实现

.parent{display:flex;}

.left{width:100px;}

.center{flex:1;}

.right{width:100px;}

响应式布局

meta标签的使用

设置布局宽度等于设备宽度，布局viewport等于度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

明天计划的事情：

继续任务8

继续思索页面布局

媒体查询

遇到的问题：

主要是自适应页面，有时还是会出现问题，属性运用的不够准确。

轮播图片还不熟悉，以后还要注意页面跳转

收获：

Get新的知识点

自适应页面还是需要多练习