今天成的事情：

解决了昨天的问题：拉伸浏览器窗口，已经点开的折叠菜单未能自动消失。

解决方法：用JS监听浏览器串窗口变化，一旦超过某宽度，就隐藏折叠菜单。

监听方法一：在标签上加入 onLoad="" onResize="" 方法 写上对应的方法即可

监听方法二：window.onresize=function(){///.....} 在方法里面写上对应的代码即可

一直没有单独用过vertical-align属性，以前都是配合绝对定位用的。

今天做footer组件时，需要将footer中的元素靠顶部对齐，忽然发现vertical-align:top简单的解决了问题。

初步学习了JS的this关键字。重点是要弄清楚this引用的对象是哪个。

例1：obj.y代表的对象是obj，所以this代表obj，obj有obj.x属性，所以是100。

1. var obj = {};
2. obj.x = 100;
3. obj.y = function(){ alert( this.x ); };
4. obj.y(); //运行结果：弹出 100

例2：有一条规则是，全局变量都是window对象的属性。

checkThis方法是window对象的属性。而var x = 'this is a property of window'是全局变量，也是window对象的属性。checkThis方法中的this代表window，所以它内部的this.x是window的属性，调用var x的值。

1. ar checkThis = function(){
2. alert( this.x);
3. };
4. var x = 'this is a property of window';
5. var obj = {};
6. obj.x = 100;
7. obj.y = function(){ alert( this.x ); };
8. obj.y(); //弹出 100
9. checkThis(); //弹出 'this is a property of window' 

学习了用CSS制作轮播图

步骤：

1 在div中写入要轮播的图片(几张图片单独在一个div中)。

1.    <div class="frame">
2.        <div class="photos">
3.            <img src="../images/home_page_bg_icon.png">
4.            <img src="../images/home_page_bg_icon.png">
5.            <img src="../images/home_page_bg_icon.png">
6.            <img src="../images/home_page_bg_icon.png">
7.        </div>
8.    </div>

2 最外层的div(class为frame),因为要做响应式，样式中div(class为frame)宽度设置与窗口同宽：100%，高度根据窗口宽度自动变化，设为：31.23vw。

3 每张img轮播时都要占据整个窗口宽度，共有4张img；

将4张img并排横放(使用float:left)，4张img总宽400%，所以div(class为photos)设置为400%。这时要轮播显示某张img，每张img宽度设置为25%，就正好撑满窗口宽度。为防止出现下方滚动条，div(class为frame)加上overflow: hidden;。

1. .frame{
2.    width: 100%;
3.    height: 31.23vw;
4.    overflow: hidden;
5. }
6. .photos{
7.    width: calc(100% * 4);
8. }
10. .photos img{
11.    float: left;
12.    width: 25%;
13. }

4 设置轮播动画，每次轮播使当前4张img组合而成的横向长图向左移动1/4。

1. @keyframes ma {
2.    0%,25%{
3.        margin-left: 0px;
4.    }
5.    30%,50%{
6.        margin-left: -100%;
7.    }
8.    55%,75%{
9.        margin-left: -200%;
10.    }
11.    80%,100%{
12.        margin-left: -300%;
13.    }
14. }

再将动画应用到div(class为photos)样式即可

1. .photos{
2.    width: calc(100% * 4);
4.    animation: ma 20s infinite alternate;/* infinite无限次轮播，alternate反向重复播放 */
5. }

明天的计划：

做完第一个页面的计划未完成。明天完成，还有栅格布局。

遇到的问题：

轮播图，带着文字和图片一起轮播未实现。随着窗口宽度的拉伸，文字的位置会偏移。因为轮播图(含不可见部分)是由4张img横向排列，4行文字在窗口拉伸的情况下无法分别定位在每张img之中而不偏移位置。

收获：

学会了轮播图。