今天完成的事：

下拉框的几种方法：

1、用display:none和display:block切换

ul{

            list-style: none;

        }

        .nav>li{

            float: left;

        }

        ul a{

            display: block;

            text-decoration: none;

            width: 100px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            color: white;

            background-color: #2f3e45;

        }

        .nav>li:first-child a{

            border-radius: 10px 0 0 10px;

        }

        .nav>li:last-child a{

            border-radius: 0 10px 10px 0;

        }

        .drop-down{

            /*position: relative;*/

        }

        .drop-down-content{

            padding: 0;

            display: none;

            /*position: absolute;*/

        }

        h3{

            font-size: 30px;

            clear: both;

        }

        .drop-down-content li:hover a{

            background-color:red;

        }

        .nav .drop-down:hover .drop-down-content{

            display: block;

        }

2、给悬浮的这个li设置一个固定高度，然后设置超出部分隐藏，悬浮时显示。

<style>

        ul{

            list-style: none;

        }

        .nav>li{

            float: left;

        }

        ul a{

            display: block;

            text-decoration: none;

            width: 100px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            color: white;

            background-color: #2f3e45;

        }

        .nav>li:first-child a{

            border-radius: 10px 0 0 10px;

        }

        .nav>li:last-child a{

            border-radius: 0 10px 10px 0;

        }

        .drop-down{

            /*position: relative;*/

            height: 50px;

            overflow: hidden;

        }

        .drop-down-content{

            padding: 0;

            /*position: absolute;*/

        }

        h3{

            font-size: 30px;

            clear: both;

/*            position: relative;

            z-index: -1;*/

        }

        .drop-down-content li:hover a{

            background-color:red;

        }

        .nav .drop-down:hover{

            overflow: visible;

        }

</style>

3、给下拉菜单设置固定的高度，下拉菜单的内容设置透明opacity: 0;，悬浮在下拉菜单时opacity: 1;来实现

<style>

        ul{

            list-style: none;

        }

        .nav>li{

            float: left;

        }

        ul a{

            display: block;

            text-decoration: none;

            width: 100px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            color: white;

            background-color: #2f3e45;

        }

        .nav>li:first-child a{

            border-radius: 10px 0 0 10px;

        }

        .nav>li:last-child a{

            border-radius: 0 10px 10px 0;

        }

        .drop-down{

            /*position: relative;*/

            height: 50px;

        }

        .drop-down-content{

            padding: 0;

            opacity: 0;

            /*position: absolute;*/

        }

        h3{

            font-size: 30px;

            clear: both;

/*            position: relative;

            z-index: -1;*/

        }

        .drop-down-content li:hover a{

            background-color:red;

        }

        .nav .drop-down:hover .drop-down-content{

            opacity: 1;

        }

</style>

4、将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。

<style>

        ul{

            list-style: none;

        }

        .nav>li{

            float: left;

        }

        ul a{

            display: block;

            text-decoration: none;

            width: 100px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            color: white;

            background-color: #2f3e45;

        }

        .nav>li:first-child a{

            border-radius: 10px 0 0 10px;

        }

        .nav>li:last-child a{

            border-radius: 0 10px 10px 0;

        }

        .drop-down{

            /*position: relative;*/

            height: 50px;

        }

        .drop-down-content{

            padding: 0;

            opacity: 0.3;

            height: 0;

            overflow: hidden;

            transition: all 1s ease;

            /*position: absolute;*/

        }

        h3{

            font-size: 30px;

            clear: both;

/*            position: relative;

            z-index: -1;*/

        }

        .drop-down-content li:hover a{

            background-color:red;

        }

        .nav .drop-down:hover .drop-down-content{

            opacity: 1;

            height: 150px;

        }

明天计划的事：

继续任务七，继续了解bootstrap

遇到的困难：

1、依旧是bootstrap的问题，对它了解太少，运用不熟，自己觉得用它还没有自己写的快。栅格系统做任务七第二页面的时候用了“col-xs-3”但是我做下来觉得其实用1-12列任意一列都行吧，到时候都是要改样式的，所以有什么不同？

2、psd图的比例问题，做到页面上该怎么算，做出来不能完全和psd图一样，而且在Chrome调试里面手机端很好的呈现出来，但是用真实的手机查看时完全就变了样，要在真机上呈现出来效果调试里的比例又不对了，是因为自适应没有做对吗？

收获：

综上所述