今天完成时事情：

完成技能树首页的布局，不使用bootstrap，用less并且编译，开始想不用bootstrap写头都痛，看了些关于bootstrap栅格系统和轮播图的源码，写了自己的栅格和轮播：

栅格主要思路是写一个div作为容器宽度设置100%，里面在写个div作为行，再在里面写一个div作为列，让他们左浮动（在父容器清除浮动）然后分别为里面的列设置百分比，然后用媒体查询设置当屏幕宽度小于多少像素的时候里面的列改变宽度百分比，当里面的列宽度变大的时候后面的列就会被挤到下一行，就可以达到我们想要的效果了。

轮播图主要思路：将4张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。然后使用CSS3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。4张图片，需要切换3次，为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。即20%~40%里面包含切换到第二张图片并且将第二张图片静置：

/*轮播图*//
css代码

#frame {/*----------图片轮播相框容器----------*/
    position: relative; /*--绝对定位，方便子元素的定位*/
    width: 100%;
    height: 30vw;
    overflow: hidden;/*--相框作用，只显示一个图片---*/
}
#photos img {
    float: left;
    width:25%;//四张图片，每张25%//
    height: 100%;
}
#photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
    position: absolute;z-index:9;
    width: calc(100% * 4);/*---修改图片数量的话需要修改下面的动画参数*/
    overflow: hidden;
}
.play{
    animation: ma 10s ease-out infinite alternate;/**/
}
@keyframes ma {
    0%,25% {        margin-left: 0   ;    }
    30%,50% {       margin-left: -100%;    }
    55%,75% {       margin-left: -200%;    }
    80%,100% {       margin-left: -300%;    }
}

<!--轮播图-->
html代码

<div id="frame" >
    <div id="photos" class="play">
        <img src="images/task84.png" >
        <img src="images/task840.jpg" >
        <img src="images/task842.jpg" >
        <img src="images/task843.jpg" >
    </div>
</div>

明天计划做的事：继续技能树剩下的两个页面；

遇到的问题：轮播图中使用了定位，脱离文档流了，所以会把下面的div盖住，在父元素中overflow: hidden;就可以了。

收获：自己模仿bootstrap写了栅格和轮播图，但是里面还有些不足，慢慢完善吧