今天做的事：

1.修改，提交任务7，开始任务8

2.学习了html中audio文件简单的的引入：

<script>
    window.onload = function(){
        var audio = document.getElementById('music');
        audio.pause();//打开页面时无音乐
    };
    function play() {
        var audio = document.getElementById('music');
        if (audio.paused) {
            audio.play();
            document.getElementById('musicImg').src = "../img/task7-2/audio.png";
        }
        else {
            audio.pause();
            audio.currentTime = 0;//音乐从头播放
            document.getElementById('musicImg').src = "../img/task7-2/audio.png";
        }
    }
</script>

<audio id="music" src="../audio/xiabibi.mp3" loop="loop" autoplay="autoplay">
</audio>

3.学习bootstrap基本的导航标签

<ul class="nav nav-tabs">

 <li class="active"><a href="#">Home</a></li>

 <li><a href="#">SVN</a></li>

 <li><a href="#">iOS</a></li>

 <li><a href="#">VB.Net</a></li>

 <li><a href="#">Java</a></li>

 <li><a href="#">PHP</a></li>

</ul>

4.学习响应式的导航栏

为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

5.学习多列布局的多种方式:

该布局方式非常常见，适用于定宽的一侧常为导航，自适应的一侧为内容的布局

利用float+margin实现

.left{float:left;width:100px;}.right{margin-left:100px;}

使用float+overflow实现

.left{width:100px;float:left;}.right{overflow:hidden;}

使用table实现

.parent{display:table;table-layout:fixed;width:100%;}.left{width:100px;}.right,.left{display:table-cell;}

实用flex实现

.parent{display:flex;}.left{width:100px;}.right{flex:1;}

明天计划的事：

继续任务8

遇到的困难：

1.多次任务都遇到屏幕变宽导致网页变形，经一师兄的指点，才发现最终的原因是css使用单位不一，

%和vw交叉使用。而要让经常变形的header、footer占满宽度，则只需要将.container改为container-fluid即可。

2.对导航栏的使用非常生涩，还不能理解其数据关联，只能勉强生搬硬套。

一个导航栏搞了一个晚上。

收获：

最难受的页面变形问题搞定了

学习了bootstrap的导航栏的写法

学习了利用html，css实现常见的布局

进度：任务8

开始时间：2018.04.22

预计结束时间：2018.04.26

有无延期风险： 无

禅道：http://task.ptteng.com/zentao/my-task.html