今天完成的事情：学习了些知识点，根据官网给的css思维导图用软件临摹了个一样的思维导图并填充相关的知识点。完善了任务8相关页面的细节问题。

明天计划的事情：就先把相关的未学习的及未整理出的知识点给弄好，然后再进行下一个任务

收获：

1.如何实现纯CSS3轮播图：

自从出现了CSS3，有了很多动画属性，所以实现纯CSS3轮播图其实挺简单的，除去布局上的，轮播图的效果主要由animation和@keyframes属性来实现，大致步骤如下

1.基本布局：

将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。

2.设置动画：

然后使用css3动画，通过用margin的负值来对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。4张图片，需要切换3次.根据需要可以对各个图片添加相应的序号和图片简介。

ps:介绍下animation这个属性，

animation{

     animation-name(动画名称),

     animation-duration(设置时间),

     animation-timing-function(速度类别),

     animation-delay(延迟开始播放时间),

     animation-iteration-count(播放次数),

     animation-direction(设置往返轮流播放)

}

所以下面代码中的.play{ animation: ma 20s ease-out infinite alternate;}分别为名称ma，总时间20秒，ease-out（动画以低速结束），alternate（轮流反向播放动画）

再介绍下 @keyframes，用animation必定组合@keyframes，这样才是完整的，就说说百分比吧，比如下面代码，30%,50% {margin-left: -300px;}，要算出实际的时间就是20*(0.5-0.3)=4，所以过渡时间实际是4秒，还有其内容是移动图片用的属性是margin-left负值向左偏移300像素。其实除了用margin-left之外也可以用opacity属性来隐藏，算好时间就行了，这个就不讲了，官网上有。

代码如下：

<style>

    #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}

    #dis{position:absolute;left:-50px;top:-10px;opacity:.5}

    #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}

    #photos img{float:left;width:300px;height:200px}

    #photos {  position: absolute;z-index:9;  width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  }

    .play{ animation: ma 20s ease-out infinite alternate;}

    @keyframes ma {

        0%,25% {        margin-left: 0px;       }

        30%,50% {       margin-left: -300px;    }

        55%,75% {       margin-left: -600px;    }

        80%,100% {       margin-left: -900px;    }

    }

</style>

--------------------------------------------------------------------------------------------------

<div id="frame" >

    <div id="photos" class="play">

        <img src="images/1.jpg" >

        <img src="images/3.jpg" >

        <img src="images/4.jpg" >

        <img src="images/5.jpg" >

        <ul id="dis">

            <li>111111111111111</li>

            <li>22222222222222</li>

            <li>33333333333333</li>

            <li>44444444444444</li>

        </ul>

    </div>

</div>

2.

transition和animation的区别：

animation可以具体的控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前状态等；translation只是一个过渡 只能设置 初始值和结束值。

3.关于媒体查询的一些用法

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

表示仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。（通常，方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。）如果其中一个条件为 False，则无法应用媒体查询规则。

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。

iPad 上可以使用的是 orientation媒体特性，而width用于 Apple iPhone 之上，主要是因为 iPhone 不支持 orientation媒体特性。您必须使用 width模拟这些方向断点。

4.

CSS中LI圆点样式li {list-style-type:符号名称}

css中用list-style-type指定列表（lists）前面符号,如下： 

li {list-style-type:符号名称} 

符号名称可用的值为： 

disc : 　CSS1　实心圆 

circle : 　CSS1　空心圆 

square : 　CSS1　实心方块 

decimal : 　CSS1　阿拉伯数字 

lower-roman : 　CSS1　小写罗马数字 

upper-roman : 　CSS1　大写罗马数字 

lower-alpha : 　CSS1　小写英文字母 

upper-alpha : 　CSS1　大写英文字母 

none : 　CSS1　不使用项目符号 

armenian : 　CSS2　传统的亚美尼亚数字 

cjk-ideographic : 　CSS2　浅白的表意数字 

georgian : 　CSS2　传统的乔治数字 

lower-greek : 　CSS2　基本的希腊小写字母 

hebrew : 　CSS2　传统的希伯莱数字 

hiragana : 　CSS2　日文平假名字符 

hiragana-iroha : 　CSS2　日文平假名序号 

katakana : 　CSS2　日文片假名字符 

katakana-iroha : 　CSS2　日文片假名序号 

lower-latin : 　CSS2　小写拉丁字母 

upper-latin : 　CSS2　大写拉丁字母