今天完成了什么：

还在完成头部汉堡菜单。

今天遇到了什么问题：

1.想把菜单栏移到右边margin-left：auto没反应，后来检查属性发现父级有弹性盒子。添加了align-items：flex-end和justify-content：flex-end都无效，再检查发现是父元素自带了margin-right：auto important！，修改后才完成，

2，然而并没有对齐，修改了col值还是没有，师兄指点添加,<div class="container"><div class="row ">盒子包裹他们的 内容，然后再添加个最大的盒子设置背景颜色即可。

3，汉堡按钮跟图标不对齐，f12发现右边有padding， 设置padding-reight:0.但是发现在媒体查询576px的时候汉堡按钮是紧靠右边的，这样有点丑，于是在576px的情况下添加了.row .bg-light{padding-right:1rem;} }才有点距离，显示的好看点。

明天计划：

继续完成任务；

今天收获了什么：

 小课堂调用f12Network

红点是记录network的开关，默认为打开状态。

第二个Clear按钮，可以清除记录下来的Network内容。

第三个是捕获网页加载截图(Capture Screenshots)。可以记录每次的页面有新加载的时候的截图。可以通过这个截图了解页面的具体显示过程。

第四个是Filter滤镜功能

第五个是显示request(请求)列表的样式的按钮，提供大和小(large|small)两种。

使用CSS实现按钮点击波纹效果

有的网站会为按钮添加点击波纹效果提升网站效果，我们可以简单实现一下：

我们拿过来主要修改下选择器就可以食用，

主要借助::after伪类及CSS3中的transform和transition属性：

html:

<div class="container text-center">

        <button class="btn btn-default ripple btn-lg">Button</button>

        <button class="btn btn-default ripple btn-lg">Button with very long content</button>

</div>

.ripple {

    position: relative;

    //隐藏溢出的径向渐变背景

    overflow: hidden;

}

.ripple:after {

    content: "";

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

    //设置径向渐变

    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);

    background-repeat: no-repeat;

    background-position: 50%;

    transform: scale(10, 10);

    opacity: 0;

    transition: transform .3s, opacity .5s;

}

.ripple:active:after {

    transform: scale(0, 0);

    opacity: .3;

    //设置初始状态

    transition: 0s;

}

.ripple {

    position: relative;

    //此处不需要设置overflow:hidden,因为after元素需要溢出显示

}

.ripple:focus{

    outline: none;

}

.ripple:after {

    content: "";

    display: block;

    position: absolute;

    //扩大伪类元素4个方向各10px

    top: -10px;

    left: -10px;

    right: -10px;

    bottom: -10px;

    pointer-events: none;

    background-color: #333;

    background-repeat: no-repeat;

    background-position: 50%;

    opacity: 0;

    transition: all .3s;

}

.ripple:active:after {

    opacity: .3;

    //设置初始状态

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    transition: 0s;

}