今天完成的事

1.修改按钮开关代码

<div class="wrap">
      <input type="checkbox" id="checkbox">
      <label for="checkbox">
<span class="move">
          <span class="e">
          <em>找护工</em>
          <em>找雇主</em>
          </span>
      </span>
      </label>
  </div>

2.从task5-2.psd里导出按钮部分的的css代码

.圆角矩形_6 {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 358px;
    top: 50px;
    width: 144px;
    height: 70px;
    z-index: 7;
}
.圆角矩形_5 {
    border-radius: 10px;
    background-color: rgb(85, 168, 179);
    position: absolute;
    left: 217px;
    top: 50px;
    width: 286px;
    height: 70px;
    z-index: 6;
}

3.为开关按钮导入样式

.wrap {
    width:140px;                        /*设置容器的宽度*/
    height:40px;                        /*设置容器的高度*/
    position: fixed;                    /*设置为相对浏览器窗口定位*/
    left: 50%;                          /*设置距离左边50%*/
    margin-left: -70px;                 /*设置左内边距为-70px 矫正吱声长度带来的偏差*/
}
input {
    display:none;                       /*设置使input不可见*/
}
label {
    display:block;                      /*设置元素为块级元素 并带有前后换行符*/
    border:1px solid
    rgb(95, 192, 205);                  /*设置边框宽度为1px 实体线无阴影 颜色与header同色*/
    background: rgb(85, 168, 179);      /*设置右边滑动轨道内部背景颜色*/
    height:40px;                        /*设置滑动框高度*/
    border-radius:5px;                  /*为滑动框添加圆角边框 半径5px*/
    transition:.3s;                     /*设置滑块过渡效果为3s*/
}
label .move {
    display:block;                      /*设置此元素为块级元素 带有前后换行符*/
    width:70px;                         /*设置宽度为50px*/
    height:40px;                        /*设置高度为40px*/
    border-radius:5px;                  /*设置圆角 半径5px*/
    box-shadow:1px 1px 1px
    rgb(95, 192, 205);                  /*设置滑块边框样式*/
    background:white;                    /*设置滑块背景颜色*/
    transition:.3s;                     /*设置滑块过渡效果时长为3s*/
    overflow:hidden;                    /*设置元素显示方式 其余不可见*/
}
input:checked+label {
    background:rgb(85, 168, 179);       /*设置左边滑轨内部背景颜色*/
}
input:checked+label .move {
    transform:translateX(70px);         /*设置滑块可以横向滑动（translateX）滑动距离为70px*/
    box-shadow:none;                    /*消除阴影*/
}
.move span {
    width:100%;                         /*设置宽度*/
    display:block;                      /*设置元素为块级元素 带有前后换行符*/
    height:100%;                        /*设置高度*/
    line-height:1.25rem;                /*设置行高为*/
    transition:0.3s;                    /*设置滑动效果时长为0.3s*/
}
input:checked+label .move span {
    transform:translateX(-40px);
}
em {
    text-align:center;
    width:100%;
    height: 100%;
    font-size: 12px;                     /*设置字体大小*/
    font-style:normal;
    float: left;
}

.e {
    white-space: nowrap;                /*设置文字不换行*/
    width: 70px;
}

明天计划的事

1.完成开关按钮。

2.添加列表内容。

遇到的问题 

无法将文字很好的定位在开关内显示，拨动时总是会偏移。

明天实在不行的话就在外部直接绝对定位到开关上显示，但是这样就不知道能不能正常实现开关的功能。

收获 

1.理解了一些伪元素的原理。

2.多认识了几个属性值。