今天完成的事情：上午写完了任务12中关于任务6的大部分页面代码，完成了下拉菜单的部分，下午继续研究下拉菜单的实现原理，大约16时左右完成任务12的代码编写，并反复在谷歌浏览器开发者工具下进行查看，调整细节部分。后来开始查看任务13的任务要求，晚上编写了一部分公共部分的代码，比如顶部导航栏的3列布局，底部的按钮样式等。

明天计划的事情：完成任务13的首页和结果页两个网页。探索不使用bootstrap框架的情况下网页的实现，以及如何用更少的代码，完成布局，提升自己的能力。

遇到的问题：

  主要是任务6中下拉菜单的实现，在bootstrap框架下，我们更多地是看到使用按钮与下拉菜单ul标签相关联，通过框架中的js来实现。在教程中也是现成的案列可以套用，但是感觉div嵌套的太多了，可不可以简化div的嵌套，来实现同样的表现呢？基于此，就专门花了一些时间来研究下拉菜单是如何实现的。后来通过反复实践，不断调整代码，有了更多的发现。在框架下，下拉菜单要通过js来辅助实现，js的部分，没有研究，就是只对html网页和css样式部分进行的实验。在html网页中，表现出来的div或者按钮和隐藏掉的ul下拉菜单是兄弟级，归属于父级div，显示部分有个dropdown-toggle的类，用于让js识别，但是如果你去掉的话，发现也不影响效果的实现，所以这部分具体怎么运作，还不清楚。后边还必须有data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"这三个属性，才能实现点击div时在父级添加open的类，在open类中，有定义了类名为dropdown-menu的ul下拉菜单的显示。这是这次任务6的单个下拉菜单的代码，以及框架中dropdown-menu的属性：

<div class="meun-head">

    <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">所在地

       <span class="caret"></span>

    </div>

    <ul class="dropdown-menu">

    <li><a href="">所在地</a></li>

    <li><a href="">北京</a></li>

    <li><a href="">河北</a></li>

    <li><a href="">天津</a></li>

    <li><a href="">......</a></li>

    </ul>

</div>

<style type="text/css">

‍‍.dropdown-menu {  

position: absolute; /*设置绝对定位，相对于父元素div.meun-head*/ 

top: 100%;  /*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/

left: 0;  

z-index: 1000; /*让下拉菜单项不被其他元素遮盖住*/ 

display: none;  /*默认隐藏下拉菜单项*/

float: left;  

min-width: 160px;  

padding: 5px 0;  

margin: 2px 0 0;  

font-size: 14px;  

text-align: left;  

list-style: none;  

background-color: #fff;  

-webkit-background-clip: padding-box;          

background-clip: padding-box;  

border: 1px solid #ccc;  

border: 1px solid rgba(0, 0, 0, .15);  

border-radius: 4px;  

-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);          

box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

}

</style>

在看上边dropdown-menu类时，我们发现，我们还2可以就下拉菜单的阴影，背景色，字体大小，位置，以及文字对齐方式进行修改，以达到自己需要的表现效果。我们还可以给下拉菜单设置dropdown-menu这类，使下来菜单在div下偏右显示，尤其在最右侧的div下，可以防止横向滚动条的实现！‍

收获：主要是下拉菜单部分的认识，还有任务13中，要编写全局样式这个概念的理解和实践。但是目前就任务7而言，可用的公共部分其实并不是很多，看看在做任务时会不会有更多的发现，以简化代码，提高可维护性！以下附上任务12的代码，点击返回图标跳转到第二张网页！