今天完成的事情：

今天开始写第一个页面。不用bootstrap的框架，把栅格布局的结构从源代码里摘出来作为组件来用；

轮播图部分则是利用css3中animation、transition动画属性写了一个自动轮播但不能手动的轮播图。

明天计划的事情：

利用媒体查询来写导航部分的自适应部分，然后写第二个页面。

遇到的问题：

header{
   position: fixed;
   padding: 0.5rem 1rem;
   height: 3rem;
   background: #5fc0cd;
   color: #fff;
   top: 0;
   left: 0;
   right: 0;
   line-height: 3rem;
}
main{
top: 3rem;
   left: 0;
   right:0;
   background: #fff;
   position: absolute;
   overflow-y: auto;
}

.photo{
   background: url(background.jpg) no-repeat center;
   width: 100%;
   height: 12rem;
   background-size: cover;
   position: relative;

}
师弟问的一个问题，被难住了。
header设置的是fixed固定定位，height：3rem；main设置的是absolute绝对定位，top:3rem；main的第一个子元素设置的是相对定位relative，高度为12rem。
但是header和main中间就有空隙，设置main的top也没用。但是将main的position:absolute,top:3rem换成margin-top可以解决问题；或者不管main，而设置photo:
将相对定位改成绝对定位，或者设置一个padding-top，或者设置一个overflow，就都能解决问题。
但还是不清楚问题到底在哪儿，求指导。

收获：

学习了css中之前接触较少的animation、transition、transform3个动画属性的相关属性，并且写了轮播图部分；

了解了.visible-sm、.visible-md的原理及使用；

学习了~连接符的用法：

css中“~”是:为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

p~ul{