今天完成的事情：

今天做的不多，看了权重问题，去百度整理一下框架，然后使用框架，把官网的轮播图拿过来，然后自己改成想要的样式，做了一个导航栏，但是并不是很满意。

明天计划的事情：

继续任务8，做完第一个页面的大部分。

遇到的问题：

权重问题，一开始我的代码覆盖不了，引过来的代码，就是权重不够，然后百度了一下，用了最高权重

                            !important

1.!important会修改当前对应元素的当前css属性和值得权重

2.!important指定的属性权重比class选择器，ID选择器，内联样式的权重都高。

3.!important只对当前元素当前属性权重有影响，对子元素权重没影响

 如果你遇到了特殊的需求，或者你想覆盖用户代理（译注：即浏览器）和开发者的默认样式，提高页面可访问性，慎重使用!important。你要对你的CSS在考虑周全的同时尽可能地避免使用!important。甚至在上面提到的许多能用到!important的地方它也不总是必要的。

能不用就不用。

轮播图

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（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="../img/html8.1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="../img/html8.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="../img/html8.3.png" alt="Third slide">
        </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>

这个是轮播图代码，轮播图并不难，只要你把Bootstrap的库引过来，然后用上面的代码自己在调整一下图片位置，也可以改一下样式。

导航栏问题，导航栏虽然我自己拿过来用了，但是要改的地方很多，

<div class="container logo">
    <span>客服热线：010-594-78634</span>
       <div>
        <img src="../img/task8.2.png" height="24" width="25"/>
        <img src="../img/task8.1.png" height="24" width="25"/>
        <img src="../img/task8.png" height="24" width="25"/>
     </div>
</div>

<nav class="navbar navbar-default" id="header" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="../img/ptt8.png">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav" id="top">
                <li><a href="https://maikihyh.github.io/task/html/task7.1.html">首页</a></li>
                <li><a href="https://maikihyh.github.io/task/html/task7.1.html">职业</a></li>
                <li><a href="https://maikihyh.github.io/task/html/task7.1.html">推荐</a></li>
                <li><a href="http://www.jnshu.com/home">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

这个是我改过的，首先用到了

container

这个元素放到父元素里面，就会自动计算两边距离，方便的地方是可以不用，你再去计算，给他增加外边距，它可以自适应，屏幕大俩边距离大，并且不和flex冲突，这样可以达到垂直居中，加俩边距离相等。

收获：

今天做任务8时感觉到了难度，需要用框架，还要改别人的东西，而且都是一些新知识，任务8仅仅一个导航栏，就用到了权重，垂直居中  container，超链接等，任务8最让我感觉难度的地方，是你用别人的框架需要自己改，它加了的元素，有些符合你的要求，有些你就需要改掉，但是同样的要注意元素冲突问题，容易出现bug，这就需要反复试，不断百度，也是一个学习过程。今天写好了导航栏，轮播图，总体来说还是让我满意，并且学习了很多。