今天完成的事情：

做完了任务8，9.bug解决适应移动端，并且没什么问题。

明天计划的事情：

任务10

遇到的问题：

很多bug，第2个页面的图片不能自适应，影响整体布局，导致被字体覆盖一部分

@media screen and (max-width:400px){
    .to-potato-net img{
        width:210px;
    }
}
.to-potato-net p{
  padding: 40px;
}
.todou-history p{
  padding: 20px;
}
.todou-box{
    border: 1px solid #e6e6e6;
    margin-bottom: 40px;
    margin-right: 20px;

我用的是媒体查询屏幕小的时候限制图片宽度，解决这个问题，

还有就是动画效果动画效果，我先是给他一个相对于下面盒子的绝对的定位，然后用dispiaynone隐藏它，然后在hover效果时，显示出来并且有动画效果，

.engineer{
    position: absolute;
  text-align: center;
    padding: 80px 40px 40px 40px;
    height: 422px;
    color: white;
    background-color:rgba(61,61,61,1);
    /*animation:gogogo 2s infinite linear ;*/
    display: none;
    -webkit-animation:gogogo 2s; /* Safari and Chrome */
}
.engineer h4{
    color: white;
}
@-webkit-keyframes gogogo{
    /*0%   {background:red; left:0px; top:0px;}*/
    /*25%  {background:yellow; left:10px; top:0px; }*/
    /*50%  {background:blue; left:20px; top:20px;)}*/
    /*75%  {background:green; left:0px; top:10px;}*/
    /*100% {background:red; left:0px; top:0px;}*/
    from {-webkit-transform: rotateY(0deg);}
    to {-webkit-transform: rotateY(720deg);}
}

*animation:gogogo 2s infinite linear ;

这个元素可以让动画效果，一直持续下去，一次是俩秒时间，然后就是rotate是可以围绕x或者

y轴旋转，backround是可以改变颜色，变成炫彩的，还可以控制它移动的位置。

收获：

任务89总结

     任务89做的时间有点长了，但是让我学到了很多有用的东西，轮播图，框架，动画效果，如何使用gird布局，俩个hover效果，如何一起显示

任务89，让我学到的东西很多，还有有序列表怎么垂直居中，3d旋转和动画效果加一起，媒体查询的方便，各种解决不了的，可以用媒体查询，它会自适应移动端，

container

还有就是栅格系统，方便，布局上面也好，而且自适应，加上引用框架，可以解决很多麻烦。

任务8：

1.如何实现轮播图？

 1.先让图片轮播起来。基本就是写一个 play函数里面加定时器，每次使图片的index对象加一，当index大于最大值时，设置index等于第 一张图片.这样轮播图就动起来了。

    2. 轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。

    3. 图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。

     4. 左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示，实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示，实现原理就是使 index 对象加一。 

    5. 对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。

    6. 当鼠标放在轮播图区域时停止轮播，实现原理就是清除定时器，离开开始轮播就是加上定时器。

当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样

2、对文档流的影响

元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。

元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。

3、对浮动元素的影响

负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。

4、对绝对定位的影响

对于绝对定位元素，负margin会基于其绝对定位坐标再偏移

任务9

1.如何使用bootstrap栅格系统？ 

 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

2.媒体查询如何使用？  

ink元素中的CSS媒体查询

css样式表中媒体查询

3.响应式的优点与缺点？  

优点

兼容性好，跨平台，移动设备尺寸参差不齐，版本定制通常只适用于固定规格的设备，但不适用分辨率变化较大的设备。

　，方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

缺点

　　　　1.页面加载的代码多了，导致文件增大，影响加载速度；

　　　　2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

　　　　3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。