发表于： 2017-03-20 21:04:32

任务十五

今天完成的事情

1. 使用css完成侧边栏菜单弹出效果。
2.使用flex完成栅格布局。
关键代码如下，主要是利用flex-wrap的换行属性，然后再配合媒体查询使用。

.flex-box(@column:row,@align-items:centerr){
  display: flex;
  flex-direction: @column;
  align-items: @align-items;
}
.make-row(){
  .flex-box();
  flex-wrap: wrap;
  width: 100%;
}
.flex(@number){
  flex:@number;
}

明天计划的事情

1.使用js完成轮播图效果。
2.完成响应式导航下拉菜单

遇到的问题

1.关于侧边栏动画效果，最开始的想法是使用display：none，结果发现动画效果无法实现，且要完成再次点击收回这个效果，需要用到js。网上查阅资料后发现了一种利用纯css实现的方法。大致思路如下：

<div>
   <div class="slide-nav">
      <input type="checkbox">
   </div>
   <div class="main"></div>
</div>

‍‍给侧边菜单设置绝对定位，main设置相对定位，最外层设置相对定位，main覆盖在侧边栏上，input设置为display：none，然后结合check伪类属性，实现侧边栏点击弹出，再次点击收回的效果。‍‍
完整代码：

* {margin: 0; padding: 0;}
#wrapper {width: 645px; height: 500px; margin: 35px auto 50px auto;}
h2 {
   color: #fff; font: 300 40px 'Open Sans';
   width: 300px; padding: 30px; float: left;
}

.mobile {
   position: relative;
   float: left;
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
   overflow: hidden;
}
/*Hiding the checkbox*/
#tm {display: none;}
/*Content area*/
.mobile section {
   background: url("img/mb1.png");
   width: 285px; height: 500px;
   position: relative;
   transition: all 0.25s;
}
.mobile section label {
   display: block;
   position: absolute;
   left: 20%;
   top: 100px;
   padding: 10px 0;
   width: 60%;
   border: 2px solid white;
   border-radius: 4px;
   color: white;
   font: bold 14px Montserrat;
   text-align: center;
   cursor: pointer;
   text-transform: uppercase;
}
/*Nav styles*/
.sidenav {
   background: rgb(50, 60, 60);
   position: absolute;
   left: 0; top: 0; bottom: 0; padding-top: 100px;
   width: 150px;
}
.sidenav li {list-style-type: none;}
.sidenav a { color: white; text-decoration: none; }
.sidenav b {
   display: block;
   font: bold 12px/48px Montserrat;
   opacity: 0;
   transform: translateX(50px);
   transition: all 0.4s;
}
.sidenav i {
   /*display: block;*/
   width: 50px;
   /*float: left;*/
   display: inline-block;
   font-size: 16px;
   line-height: 48px;
   text-align: center;
}
/*Animation controls using checkbox hack*/
/*Animate content area to the right*/
#tm:checked ~ section {transform: translateX(150px);}
/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav b {opacity: 1; transform: translateX(0);}

/*Adding delay to link animation - in multiples of .08s*/
/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
#tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}
#tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}
#tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}
#tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}
#tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}
#tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}

html结构如下：

<div id="wrapper">
   <!--<h2>Off Canvas Menu with Animated Links</h2>-->
   <div class="mobile">
      <!-- Checkbox to toggle the menu -->
      <input type="checkbox" id="tm" />
      <!-- The menu -->
      <ul class="sidenav">
         <li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
         <li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
         <li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
         <li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
         <li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
         <li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
      </ul>
      <!-- Content area -->
      <section>
         <!-- Label for #tm checkbox -->
         <label for="tm">Click Me</label>
      </section>
   </div>
</div>