今天完成的事情：

1.任务八的官网界面正在进行。轮播图完成，也使用了bootstrap栅格。

<div class="carousel slide" id="myCarousel">
    <!--轮播（Carousel）指标-->
    <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>
    <!--轮播（Carousel）项目-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="技能树首页_02.png" alt="first">
        </div>
        <div class="item">
            <img src="首页_02.png" alt="second">
        </div>
        <div class="item">
            <img src="首页_03.png" alt="third">
        </div>
    </div>
    <!--轮播（Carousel）导航-->
    <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>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

2.任务七被打回。有些细节性的东西没有做好，如按钮的默认样式没有清除干净。首页边框颜色不对。修改任务七。

明天计划的事情：

1.继续使用bootstrap栅格，布置剩下的界面，推进任务。

遇到的问题：

1.bootstrap的理解，使用了它的导航栏、轮播图和栅格，bootstrap栅栏布局里有这几个代码col-xs、col-sm、col-md、col-lg。

2.任务七相关问题，按钮默认样式未消除，直接修改其btn样式没有起作用。查找资料后，添加如下代码：

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
}

则会清除所有的按下会出现有色边框。

界面一的小圆点由于不是轮播图，由css画出，宽度变窄时会出现变形情况。原因是左右margin设置不正确。改为auto后正常。此处使用了flex布局，也可以用浮动float：left，效果一致。

3.导航栏的样式暂未调整好，明日解决。

收获：

1.bootstrap的理解，使用了它的导航栏、轮播图和栅格，bootstrap栅栏布局里有这几个代码col-xs、col-sm、col-md、col-lg。

是可以根据屏幕宽度大小，自动选择对应的类的样式。col是列column的缩写，xs是超小maxsmall的缩写，sm是小small的缩写，md是中等medium的缩写，lg是大large的缩写。对应关系如下：

     ·  col-xs-* 超小屏幕如手机 （<768px）时使用；

  ·  col-sm-* 小屏幕如平板 （768px ≤ 宽度 ＜992px）时使用；

  ·  col-md-* 中等屏幕如普通显示器 （992px ≤ 宽度 ＜ 1200px）时使用；

  ·  col-lg-* 大屏幕如大显示器 （≥1200px）时使用。

例如col-xs-12，意思是在小于768px的屏幕宽度下，自动变为1列。因为栅格布局会自动把每行分为12列，col-xs-12的意思是会占据12列，即屏幕的全部，显示效果是只会展示出1个。同理col-xs-6的意思是会展示出2个。

2.bootstrap的轮播图使用很方便，基本没有重写样式

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

class=“active”可以定义第一张显示的图。