今天完成的事 

1.开始任务12

2.添加主题颜色

.color1 {
  background-color: rgb(94,192,206);
}
.color2 {background-color: rgb();
}

3.添加相对窗口定位以及宽度设置

.fixed {
   position: fixed;
  width: 100%;
}

4.添加宽度与高度的函数

.height(@height) {
  height: @height;
}
.width(@width) {
  width: @width;
}

5.添加inline-flex的公用类

.inline-flex {
  display: inline-flex;
}

6.架构header

<header class="h">
    <div class="wrap">
        <input type="checkbox" id="checkbox" class="input">
        <label for="checkbox">
      <span class="move"> </span>
            <span class="e">
            <em>找雇主</em>
            <em>找护工</em>
            </span>
        </label>
    </div>
    <img src="map.png" class="map cursor">
</header>

7.添加header的样式

.header {
 .inline-flex;
  .fixed;
  .width(100%);
  .height(50px);
  .color1;
  div {
   .width(140px);
    .height(40px);
    .fixed;
    .left(50%);
    margin-left: -70px;
    input {
     .none;
    }
       label {
     .block;
      border:1px solid
      rgb(95, 192, 205);                  /*设置边框宽度为1px 实体线无阴影 颜色与header同色*/
      background: rgb(85, 168, 179);      /*设置右边滑动轨道内部背景颜色*/
      .height(40px);                        /*设置滑动框高度*/
      border-radius:5px;                  /*为滑动框添加圆角边框 半径5px*/
      transition:0.3s;                     /*设置滑块过渡效果为3s*/
      cursor: pointer;                    /*s设置光标样式手指变化*/
      .move {
       .block;                      /*设置此元素为块级元素 带有前后换行符*/
        .width(70px);                         /*设置宽度为50px*/
        .height(40px);                        /*设置高度为40px*/
        border-radius:5px;                  /*设置圆角 半径5px*/
        background:white;                   /*设置滑块背景颜色*/
        transition: 0.3s;                   /*设置滑块过渡效果时长为0.3s*/
      }
     .text {
       .width(140px);
        .fixed;
        top: 16px;
        .inline-flex
      }
           em {
               text-align: center;
        .width(100%);
        font-style: normal;
      }
   }
       input:checked+label .move {
             transform:translateX(70px);         /*设置滑块可以横向滑动（translateX）滑动距离为70px*/
       box-shadow:none;                    /*消除阴影*/
    }

 }
   img {
   .fixed;
    .right(10px);
    .height(20px);
    .pointer;
  }
}

明天的计划

1.继续使用less重新编辑任务5和6

2.完成任务12

遇到的问题

今天的收获

使用less更加熟练 但是还需要多多联系