今天完成的事情：把任务6的框架做出来了，还差把雪碧图填上去

     大部分时间都在看CSS模拟下拉框的百度，有很多方法，大多是加js的。

<div class="nav">

    <div class="drop-down">

            <div class="drop-down-lists">

        <div class="frame">

                    <p>所在地<b></b></p>

                </div>

                <div class="hide">

        <a href="#">果园</a>

                    <a href="#">宋庄镇</a>

                    <a href="#">西集镇</a>

        </div>

            </div>

             <div class="drop-down-lists">

                <div class="frame">

                    <p>食宿<b></b></p>

                </div>

                <div class="hide">

                    <a href="#">包吃包住</a>

                    <a href="#">包吃不包住</a>

                    <a href="#">包住不包吃</a>

                </div>

            </div> <div class="drop-down-lists">

                <div class="frame">

                    <p>病人情况<b></b></p>

                </div>

                <div class="hide">

                    <a href="#">小孩</a>

                    <a href="#">老人</a>

                    <a href="#">残疾人</a>

                </div>

            </div>

        </div>

    </div>

.nav{

    margin-top: 4rem;

}

.drop-down{

    display: flex;

    align-items: center;

    height: 3rem;

    border-bottom: .1rem solid #e1e5e7;

}

.drop-down p{

    font-size: 1rem;

    color: #afbac0;

}

.drop-down-lists{

    flex: 30%;    

    position: relative;

    display: inline-block;

}

.hide{

    display: none;

    position: absolute;

    min-width: 100%;

    background-color: #f9f9f9;  

    border: .01rem solid #e1e5e7;

}

b{

   position: absolute;

    top: 15px;

    right: 20px;

    width: 0;height: 0;

    border-width: 5px;  

    border-style: solid dashed dashed;

    border-color: #afbac0 transparent transparent;

}

.hide a{

    display: block;

    height: 1.5rem;

    line-height: 1.5rem;

    color: #afbac0;

    font-size: 1rem;

    text-decoration: none;

    text-align: center;

    border-bottom:.01rem solid #e1e5e7;

}

.drop-down-lists:hover .hide{

    display: block;

}

.hidet a:hover{

    background-color: #5fc0cd;

}

.frame{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 1.5rem;

    border-right:.01rem solid #e1e5e7;

}

明天计划的事情：把雪碧图弄好，再调整规范代码 
遇到的问题：

    这两个按钮一直合体不了，一直中间有空隙，一开始准备试试相对定位

    但是发现个简单的   margin-left: -12px; 或者  margin-right: -12px;   

 我的雪碧图代码<div class="service1"><i></i>服务日期</div>

i{

background-image: url(images/task5-2_08.png);

height: 24px;

widows: 27px;

float: left;

}

.service1 i{

background-position: 0 0;

}

  显示不出来图片就很气，不想了，明天弄。 

 
收获：今天的收获就是看了好多下拉框的代码，虽然大部分看不懂，哈哈。