今天完成的事情：

终于写出了手写导航条！

思路：利用媒体查询和弹性盒子，设定一个屏宽的阈值，大于这个阈值导航条在容器内横向排列，小于这个阈值则纵向排列

容器为弹性容器，包括的弹性元素是导航条和菜单按钮

大于阈值（576px）时 媒体查询min-width：576px 横向排列，此时隐藏菜单按钮（display：none不给菜单按钮保留位置）

小于阈值（576px）时 媒体查询max-width：576px 纵向排列，显示菜单按钮 align-items：flex-end（使菜单按钮处于最右）

列表中ul和li占据100%宽度，li居中

完整代码：

html：

<nav>

     <div class="nav">

          <div class="menu">

               <div class="bar"></div>

               <div class="bar"></div>

               <div class="bar"></div>

          </div>

          <ul>

               <li><input type="button" name="home" value="首页"></li>

               <li><input type="button" name="custom" value="在线定制"></li>

               <li><input type="button" name="standard" value="标准箱"></li>

               <li><input type="button" name="qualtity" value="品质保障"></li>

          </ul>

     </div>

</nav>

CSS:

nav {background-color: #f9f9f9;}

.nav {

     float: right;

     margin: 15px 0;

     width: 100%;

     display: flex;

     flex-flow: row nowrap; 

     justify-content: flex-end;

}

.nav input {

     cursor: pointer;

     outline: none;

     border: none;

     padding: 8px 12px;

     margin-left: 3vw;

     border-radius: 5px;

     background-color: #fff;

     color: #000;

}

.nav input:hover {

     color: #fff;

     background-color: #1d7ad9;

}

.nav ul {

    padding: 0;

    margin: 0; 

}

.nav ul li {

     list-style: none;

     line-height: 48px;

}

 .nav .menu {

     margin: 0 2vw;

    width: 35px;

    height: 30px;

    flex-flow: column nowrap;

    justify-content: center;

    align-items: center;

    border: 1px solid #1d7ad9;;

    border-radius: 6px;

    display: none;

}

.bar {

    height: 2px;

    width: 20px;

    margin: 2px 0;

    background-color: #1d7ad9;

}

@media (min-width: 576px){

    .nav ul{

        display: flex;

        flex-flow: row nowrap; 

        justify-content: flex-end;

    }

}      

@media (max-width: 576px) {

    .nav {

         display: flex;

        flex-flow: column nowrap; 

        justify-content: flex-start;

        align-items: flex-end;

    }

    .nav .menu {display: flex;}

    .nav .menu:hover+ul {display: block;}

    .nav ul {

        width: 100%;

        display: none;

     }

    .nav ul li {

        width: 100%;

        margin: 0 auto;

     }

    .nav input {

        width: 100%;

        margin: 0;

    }

}

明天计划的事情
准备开始任务11

遇到的问题
1、关于hover和扩展选择器

响应式的导航条要实现点击菜单按钮出现下拉导航条

但是刚开始写了.menu:hover ul{} 一点反应都没有

后来才知道和选择器有关。menu和ul属于同一个父元素nav 称为兄弟元素。

属于扩展选择器的有：

后代选择器（用空格隔开）表示选择nav中所有类为menu的元素

子元素选择器（用>隔开）缩小范围，只选择某个元素的子元素 ，并且默认选择满足条件的第一个子元素，第二个不受影响

兄弟选择器（用+隔开）选择同属一个父元素的兄弟元素

因此，为了实现点击菜单按钮出现下拉导航 就要使用兄弟选择器改成.menu:hover+ul{} 

2、下拉导航条按钮无法选择

hover菜单按钮，导航条展开，但是离开菜单按钮导航条就迅速收起，无法选择导航条中的按钮

解决方案：

.nav .menu:hover+ul, .nav ul:hover{

display: block;

}

添加.nav ul:hover。这样移动至导航条中也可保持展开

收获

学会了html+css实现响应式导航条

理解了后代选择器、兄弟选择器等之间的关系