今天完成的事情：

任务8进行中

学习了图片轮播

师兄小课堂知识分享（媒体查询）

媒体查询@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

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

主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width:----px)

十种媒体类型<其中Screen、All和Print为最常见的三种媒体类型>和13种媒体特性，将其组合就类似于不同的CSS集合.

媒体特性是通过min/max来表示大于等于或小于做为逻辑判断

使用关键词"and"将多个媒体特性结合在一起

“not”是用来排除某种制定的媒体类型

 only用来指定某种特定的媒体类型

在Media Query中如果没有明确指定Media Type，那么其默认为all

明天计划的事情：

1熟悉网格系统

2继续任务8

遇到的问题：

在引入bootstrap 轮播（carousel）没有搞清楚属性含义，导致没有引用成功，后来发现错误纠正后可以引用

使用 data-slide-to 来向轮播传递一个原始滑动索引

属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置

<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
    <div class="item active">
        <img src="../image/task8/work.png" alt="First slide">
    </div>
    <div class="item">
        <img src="../image/task8/work.png" alt="Second slide">
    </div>
    <div class="item">
        <img src="../image/task8/work.png" alt="Third slide">
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

收获：

1搞清了媒体查询是什么。（明天尝试用一下）

2引用bootstrap 中的carousel，高效方便。（属性含义要理解正确）