今天完成的事情:

                 今天完成了任务十三的首页，其中最难得是哪个垂直导航栏。

                 按照昨天的思路，使用hover效果，导航栏的确出来了，但是hover效果的特性就是那样，是鼠标悬停起的效果，根本没有办法支撑起一个导航栏，最后还是放弃了，在师兄的指导下，采用了checked。

                    《checked》

                                          checked 属性是一个布尔属性。

                                          checked 属性规定在页面加载时应该被预先选定的 <input> 元素。

                                          checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。

                                          checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

                                          总结一下来说的话，《checked》是属于《input》的属性，是 带有预选定复选框的 HTML 表单

            既然是复选框就会有一个很丑的按钮，如果需要把这个按钮换成任务要求的标志，那就需要隐藏掉这个默认的标志，并且自己添加一个图标上去，比如：

    其中《          w   webkit-appearance: none;》这个代码的含义是设置默认的复选框样式，最后的none代表的是取消。

  然后《              background: url(shouye1.png) no-repeat;》使用这个代码来更换成我想要的样式，其中的图片就是我要更换上去的标志，然后把这个标志设置好大小，这样图标就完成了。

              然后我把这个复选框样式的代码和我要的垂直导航栏相连接，一开始为垂直导航栏设置一个隐藏代码，比如：《display：none》.其中display还有很多有用的东西。

我把display属性总结了一下，基本代码如下：

display：none   此元素不会被显示。

display：block            此元素将显示为块级元素，此元素前后会带有换行符。

display：inline            默认。此元素会被显示为内联元素，元素前后没有换行符

display：inline-block           行内块元素。（CSS2.1 新增的值

display：list-item               此元素会作为列表显示

display：compact                    CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除

display：marker                      CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

display：table                    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

display： inline-table                 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

display：table-row-group                  此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

display：table-header-group                此元素会作为一个或多个行的分组来显示（类似 <thead>）

display：inherit                规定应该从父元素继承 display 属性的值。

display：table-column           此元素会作为一个表格标题显示（类似 <caption>）

 差不多在display属性里用的比较多的就是这些了，其中我要用到第二个，《display：block 》此元素将显示为块级元素，此元素前后会带有换行符。来取消掉我为垂直导航栏添加的《display：none》隐藏代码。

          需要把我设置的复选框按钮和隐藏的垂直导航栏链接起来，用<input type="checkbox">来控制我的垂直导航栏，比较我的导航栏设置了隐藏代码，还不占据文本框。

，然后让导航栏和我的主要内容成一个平级状态，这样导航栏就会在两端呈现出来，如果导航栏的代码放在内容的上端就是在左边出来，反之亦然，这是因为代码的优先级问题，只要在bady上面设置一个代码去掉他的块状元素就好，如：

这样两个页面就是平级，最后也能达到你想要的效果。

    明天计划的事情：

               彻底完成任务十三的重构任务，了解 Flexible Box ，并且使用 Flexible Box在任务十三的第二个页面解决以前留下的小瑕疵。

       遇到的问题：

          在任务十三的重构任务中，垂直导航栏这个难题已经解决掉了，遇到的第二个问题就是师兄要求使用《flex-basis》来完成游戏环节的布局问题，解决页面缩放中内容占据边框的问题，先熟悉这个代码吧。

               而《flex-basis》这个代码的作用是：

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

                          我对他的理解就是瓜分父值所留下来的空间，达到在百分比不均匀的时候占据剩余空间而不超出，相当于优化布局占据的比例。

    收获：

               在重构任务中，对布局有了新的见解，对文本框代码有了新的使用性，完成了对以前所学代码的巩固，在代码规范中努力纠错。