今天完成的事情：

1.完成了任务12，任务12主要用到了继承的属性还有嵌套结构；

$color:white;
$border:1px solid #ccc;
body{
  margin:0;
}
header{
  background-color:#68cdd5;
  color:$color;
  width:100%;
  height:80px;
  display:flex;
  align-items:center;
  justify-content: center;
  position: fixed;
  top:0;
}
.header2{
  display:inline-block;
}
.header1{
  @extend .header2;
  position:absolute;
  left:20px;
  color:$color;
  text-decoration: none;
}

.doctor{
  width:100%;
  height:240px;
}
.box1{
  margin-top:80px;
  width:100%;
  height:240px;
  background-image:url(doctor.png);
  background-size: cover;
  display:flex;
  align-items:center;
}
.round{
  display:inline-block;
  width:80px;
  height:80px;
  background-color:#efefef;
  border-radius:40px;
  position:absolute;
  left:35px;
  background-image:url(./woman.png);
  background-size:cover;
}
.name{
  color:$color;
  display:block;
}
.adress{
  display:inline-block;
  color:$color;
}
.word{
  position:absolute;
  left:180px;
  .adress{
    font-size:10px;
  }
}

.box2{
  width:100%;
  height:100px;
  border-bottom:$border;
  display:flex;
  align-items:center;
}
.vertical{
  display:inline-block;
  width:0;
  border-left:4px solid #68cdd5;
  height:40px;
  margin-left:30px;
}
.skills{
  display:inline-block;
  margin-left:10px;
}
.box3{
  @extend .box2;
   img{
    margin-left:30px;
  }
   div{
    margin-left:5px;
  }
}

.box4{
 @extend .box2;
}
.year{
  color:#cccccc;
  padding-left:35px;
  border-right:1px solid #cccccc;
  padding-right:35px;
  margin-right: 20px;
}
.box5{
  @extend .box2;
}
.box6{
  @extend .box2;
   .word1{
    color:red;
  }
}

.box7{
  border-bottom:$border;
  width: 100%;
  display:flex;
  align-items: center;
  margin-bottom:80px;
}
.item{
  margin-top:150px;
  margin-bottom:10px;
  position:fixed;
  bottom: 0;
  width:100%;
}
.list{
  font-size:15px;
  color:#68cdd5;
  background-color:white;
  width:48%;
  height:50px;
  padding:0px;
  margin-top:10px;
  outline:none;
  border:2px solid #68cdd5;
  border-radius: 4px;
  margin-left:2%;
  display:inline-block;
  position: fixed;
  bottom: 0;
}
.phone{
  font-size:15px;
  color:$color;
  background-color:#68cdd5;
  width:48%;
  height:50px;
  padding:0px;
  margin-top:10px;
  outline:none;
  border:2px solid #68cdd5;
  border-radius: 4px;
  margin-left:1%;
  display:inline-block;
  position: fixed;
  bottom: 0;
  left: 50%;
}
.year2{
  color:#cccccc;
  padding-left:35px;
  border-right:$border;
  padding-right:35px;
  white-space: nowrap;
  margin-right: 20px;
}
.word2{
  vertical-align: middle;
  padding-top:15px;
  padding-bottom:15px;
}

body{
  margin:0;
}
header{
  width:100%;
  height:100px;
  background-color:#68cdd5;
  display:flex;
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
   img{
    position:absolute;
    right:20px;
  }
}
.employer{
  background-color:#55a8b3;
  color:white;
  width:30%;
  height:70px;
  font-size:15px;
  border:none;
  outline:none;
  border-radius:15px;
  margin-right:-15px;
}
.worker{
  background-color:white;
  color:#68cdd5;
  width:30%;
  height:70px;
  font-size:15px;
  border:none;
  outline:none;
  border-radius:15px;
}

.box1{
  width:100%;
  height:70px;
  border-bottom: 1px solid #cccccc;
  display:flex;
  align-items:center;
  justify-content:space-around;
  position:fixed;
  top:100px;
  background-color:white;
  #position{
    width:70px;
  }
  #board{
    width:55px;
  }
}
.date{
  display:flex;
  justify-content: space-between;
  white-space: nowrap;
}
main{
  margin-top:180px;
}
.vertical{
  display:inline-block;
  width:2px;
  background-color: #cccccc;
  height:40px;
}
.icon1{
  background-image:url(css_sprites.png);
  background-repeat:no-repeat;
  width:33px;
  height:30px;
  background-position:-6px -55px;
  float:left;
  display:inline-block;
}
.icon2{
  background-image:url(css_sprites.png);
  background-repeat:no-repeat;
  width:30px;
  height:30px;
  background-position:-5px -10px;
  float:left;
  display:inline-block;
}
ul{
  list-style-type:none;
  padding:0;
}
li{
  list-style-type:none;
}
.time{
  float:right;
  color:red;
}
.times{
  margin-left:31px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mation{
  border-bottom:1px solid #cccccc;
  height:100px;
  ul li{
    margin-top:10px;
  }
}
.serve{
  color:#ccc;
}
.position{
  color:#ccc;
}
.housr{
  float:left;
  display:inline-block;
}
.first{
  color:#68cdd5;
  margin-left:6px;
  display:block;
}
.second{
  color:#ccc;
  margin-left:6px;
  display:block;
}
.my{
  float:right;
  display:inline-block;
}
.round{
  display:inline-block;
  width:80px;
  height:80px;
  background-color:#68cdd5;
  border-radius:40px;
  display:flex;
  justify-content: center;
  align-items: center;
}
footer{
  display:flex;
  justify-content: space-around;
  align-items:center;
  height:90px;
  border-top:1px solid #ccc;
  position:fixed;
  bottom:0;
  width:100%;
  background-color:white;
}
button{
  border:none;
  outline-style:none;
}

main{
  margin-bottom:100px;
}
select{
  border:none;
  color:#999;
  font-size: 15px;
}

2.进行了任务13

任务13主要用到嵌套继承还有定义混合器和使用混合器

$border:15px solid;
@mixin box($width,$height,$background){
   width:$width;
  height:$height;
  background:$background;
}
body{
  margin:0;
  background-color:#f0f0f0;
}
header{
  @include box(100%,60px,#29bde0);
  vertical-align: middle;
  display:flex;
  align-items:center;
}
.three{
  margin-left:15px;
}
.last{
  @include box(90%,7vw,white);
  outline:none;
  border:none;
  margin-left:5%;
  margin-top:1vw;
  margin-bottom:1vw;
  display:flex;
  justify-content: space-between;
  font-size:15px;
  color:#6a7b7f;
}
.game{
  margin-left:5%;
}
.box{
  width:90%;
  background-color:white;
  margin-left:5%;
  text-align:center;
   img{
    width:50px;
  }
   p{
    text-align:center;
    margin-top:10px;
    margin-bottom:0;
    color:#6a7b7f;
  }
   button{
    width:80%;
    height:6.5vw;
    margin-top:1vw;
    background-color:#29bde0;
    color:white;
    font-size:15px;
    outline:none;
    border:none;
  }
   div{
    display:flex;
    align-items:center;
    justify-content: center;
    width:100%;
    border-bottom:1px solid orange;
    height:8vw;
     span{
       color:orange;
       font-size:15px;
     }
  }
}
#triangle{
  width:0;
  height:0;
  border-top:$border transparent;
  border-bottom:$border transparent;
  border-left:$border orange;
  display:inline-block;
  position:fixed;
  right:8%;

}
.button{
  position:relative;
}
aside{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  background: #fff;
  transition: 0.2s ease-out;
  z-index: 100;
}
#sidemenu{
  display:none;
}
#sidemenu:checked+aside{
  left:0;
}
#sidemenu:checked~main{
  margin-right:-200px;
  padding-left:200px;
}

明天计划的事情：

1.完成任务14

2.继续sass的深入学习

3.继续js的学习

遇到的问题：暂无

收获：

任务13的第一个界面中侧边栏的使用出现了一点问题，主要是对伪类元素掌握的还不是特别好，

通过今天的学习，加深了checked的认识和使用

转至元数据结尾

转至元数据起始