发表于： 2017-04-08 23:48:29

4 690

一、今天完成的事情

1、完成任务8页面响适应调试。

2、完成任务10：header、footer及进度条。

3、任务9深度思考问题：

a) 媒体查询如何使用？

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。

@media 媒体类型and （媒体特性）{你的样式}

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。（具体看链接http://www.cnblogs.com/zyl-Tara/p/5519144.html）

b)响应式的优点与缺点？

概念：响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题。

缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

二、明天计划的事情

1、完成任务10，开始任务11。

2、思考任务10深度思考问题：

1) 如何改变默认radio和select的样式？

2) 自适应小屏幕设备时，该如何布局？

三、遇到的问题

1、想给第三个页面的简历幻灯效果：本来想写个百叶效果，后来发现不好写，就选个了简单的渐变效果，看代码：

.cartoon {
       position: absolute;
    width: 100%;
    padding: 0.4rem;
    height: 100%;
    background: rgba(30, 30, 30, .6);
    color: #fff;
    font-size: 0.16rem;
    opacity: 0;
}
@keyframes fadein{
        0%{
     opacity: 0;
     }
        100%{
               opacity: 1;
     }
 }
@-webkit-keyframes fadein{
       0%{
     opacity: 0;
    }
       100%{
             opacity: 1;
    } 
}
@-moz-keyframes fadein{
       0%{
     opacity: 0;
    }
       100%{
             opacity: 1;
    }
}
@-o-keyframes fadein{
       0%{
     opacity: 0;
    }
       100%{
              opacity: 1;
    }
}
@-ms-keyframes fadein{
       0%{
     opacity: 0;
    }
       100%{
              opacity: 1;
    }
}
.cartoon:hover {
       animation:fadein 1.5s linear 1;
    -webkit-animation:fadein 1.5s linear 1;
    -moz-animation:fadein 1.5s linear 1;
    -o-animation:fadein 1.5s linear 1;
    -ms-animation:fadein 1.5s linear 1;
     cursor: pointer;;
     opacity: 1;
 }