编辑日报内容...

今天完成的事情：

1.完成css任务14手写可隐藏导航栏

明天计划的事情：

1.开始轮播图的动画属性制作

2.完成css任务14

遇到的问题：

1.如何手写栅格系统

  1）首先需要一个包裹容器：

        例如：

               container {

                                width：100%；

                                max-width：1773px；

                               }

  2）定义行，因为里面的列的布局我们使用float来实现，所以需要在父元素中并清除浮动。

              .row:after {

                                content""

                               display:table;

                               clear:both;

                              }

  3）定义列，列（column）在栅格里是核心，也比较复杂列的定位有很多种，float、inline-block、flex、table都可以实现栅格布局。避免列浮动紧贴顶部。

        [class*=”col-“] {

                                     float：left；

                                     min-height：1px

                                    }

        设列的宽度，容器的总宽度是100，分成6列就是100/6=16.666%；

                   [class*=”col-“] {

                                                float：left；

                                                min-height：1px；

                                                width：16.666%；

                                               }

         通过简单的计算，可以分成不同列的宽度，

                .col-1{ width: 16.66%; } 

                .col-2{ width: 33.33%; } 

                .col-3{ width: 50%; } 

                .col-4{ width: 66.664%;} 

                .col-5{ width: 83.33%; } 

                .col-6{ width: 100%; }

收获：

1. 导航栏实现点击   隐藏  点击 出现   方法如下

           1）在需要隐藏的元素同级加    input   这个代码

                                  <input type="checkbox" id="danji">

           2）添加css代码实现隐藏       意思就是 让这个元素 隐藏

                               height: 0px;   overflow: hidden;

           3）input在选中状态先下 元素  显示      意思就是   input选中状态下    p元素   显示

                                         input:checked~p {

                                                               overflow: visible;

                                                           }

           4）把input元素绑定在label元素上       意思就是    这个功能可以绑定任何元素上实现

                                 <label "danji">          这里添加你想要控制它的元素           </label>

           5） 注意       input必须放在  需要隐藏的元素同级         inputy的id  必须和   label的  for相同