今天完成了什么：

完成头部横幅按钮，移动端汉堡菜单暂时没完成。

今天遇到了什么问题：

导航栏一开始自己用div制作，后面师兄说用汉堡菜单，查阅了汉堡菜单的作用，以移动端优先适配。

发现汉堡菜单方便是方便，但是太多需要修改的样式了，自己在f12里掌握的不足，很多样式看不懂，搞不清楚什么关联。技能尚弱鸡。

汉堡菜单缩小的时候不透明，带有其他样式，查阅了透明的相关属性，

 background-color设置为透明的方法如下：

1,比较好的方法： background-color:transparent;

2，不太好的方法（模仿透明，不仔细看，看不出来） 前三个参数是颜色，后一个是透明度，效果为白色背景透明， background-color: rgba(255,255,255,0.2);

一开始点击成黑色，查了下才知道是focus显示为黑色，复制类名，修改为白色。

当发生白色字体的样式不见了或者没效果的时候，考虑下把字体颜色变以下，因为很有可能是白色字体和白色背景一致，导致字体不见了.....

出现下图这种bug暂时没头绪，明天看看。

明天计划：

继续任务8；

今天收获了什么：

初步掌握汉堡菜单

首先，开始布局之前，需要先按照顺序分别引入css、jQuery和js文件；

然后，从最简单的菜单搭建起，利用bootstrap创建一个最基本的导航栏的步骤如下：
1、在<nav>标签上添加class类.navbar、.navbar-default，再向上面的元素添加 role="navigation"，有助于增加可访问性。
2、向 <div> 元素添加一个标题.navbar-header，内部包含了带有 .navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
3、为了向导航栏添加链接，只需要在无序列表ul里简单地添加类.nav、.navbar-nav即可。

最后，为了给导航栏添加响应式特性，需要折叠的内容必须包裹在带有.collapse、.navbar-collapse 的 <div> 中。
折叠起来的导航栏实际上是一个带有.navbar-toggle 及两个 data- 元素的按钮：第一个data-toggle，用于调用bootstrap里面JavaScript封装的折叠功能函数；第二个data-target，则是指示要切换到哪一个元素，特别注意的是这里的data-target所对应的是<div class="collapse navbar-collapse" id="example-navbar-collapse"></div>里面的id选择器的值。
而三个带有 .icon-bar 的 <span> 则是创建那个汉堡按钮。

实际上要注意的都是选择器问题，bootstrap自带了非常多的样式，需要配合f12去调试修改，注意选择器的权重之间的相互影响。

注意每个分辨率之间的媒体查询，基本都是在修改这些样式，bootstrap是以移动端适配优先，很多时候要先考虑移动端再调试pc。

底部加载bootstrap文件一定要注意顺序：

<!-- 底部加载iquery和js文件一定要按照顺序，不然gggggg -->