myself.less

  .clearfix:after {
      display: block;
      content: '';
      clear: both;
  }

  div,
  body,
  ul,
  li,
  h3 {
      margin: 0;
      padding: 0;
  }

  li {
      list-style: none;
  }

  a {
      color: @themeColor;
  }

  @margin: 0 auto;
  @themeColor: #333;
  .dropdown {
      height: 38px;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      display: block;
      float: right;
      border: 1px solid #111;
      border-radius: 4px;
      box-shadow: 2px 2px 2px 2px rgba(1, 1, 1, .2);
      a {
          text-decoration: none;
          &:hover {
              color: #ffe76c;
          }
      }
      li {
          list-style: none;
          padding: 0 10px;
          height: 24px;
          border-radius: 4px;
          -webkit-transition: all ease-in-out .5s;
          transition: all ease-in-out .5s;
      }
      .none {
          display: none;
      }
      .dr-f-ul {
          >li {
              float: left;
              &::first-child {
                  border-left: 1px solid #ccc;
              }
              &::last-child {
                  border: none;
                  padding-right: 0;
              }
          }
      }
      .dr-s-ul {
          margin-left: -11px;
          >li {
              &::last-child {
                  border-bottom: 1px solid #ccc;
              }
          }
          i {
              display: inline-block;
              width: 0;
              height: 0;
              border-bottom: 10px solid #ccc;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              -webkit-transition: all .5s;
              transition: all .5s;
          }
          .addi {
              border-bottom-color: red;
              -webkit-transform: rotateX(180deg);
              transform: rotateX(180deg);
          }
      }
  }

  .drew {
      width: 100%;
      height: 400px;
  }

  .iconUse {
      width: 1em;
      height: 2em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }

  @maxWitdth: 790px;
  @media(min-width:770px) {
      .icon {
          .iconUse;
          &:hover {
              opacity: .3;
          }
      }
      .myself {
          height: 100%;
          background: #fff;
          color: @themeColor;
          aside {
              width: 200px;
              float: left;
              height: 100%; //   background: red;
              .head {
                  text-align: center;
                  h3 {
                      color: rgb(1, 1, 1);
                      font-size: 30px;
                      padding: 20px;
                  }
                  .dr {
                      display: none;
                  }
              }
              .circle {
                  position: absolute; //   z-index: -2;
                  width: 50px;
                  height: 50px;
                  left: 75px;
                  border-radius: 50%;
                  border: 3px solid red;
                  border-bottom-color: black;
                  transition: all .4s;
                  &:hover {
                      transform: rotate(360deg); //   border-bottom-color: red;
                      border: 3px solid black;
                  }
              }
              .ct {
                  padding: 100px 0;
                  ul {
                      li {
                          width: 200px;
                          height: 40px;
                          padding: 4px 0;
                          text-align: center;
                          line-height: 40px;
                          a {
                              text-decoration: none;
                              &:before {
                                  content: ">"
                              }
                              span {
                                  font-size: 16px;
                                  &:hover {
                                      color: #ffe76c;
                                  }
                              }
                          }
                      }
                  }
              }
              .foot {
                  position: fixed;
                  top: 100%;
                  transform: translateY(-100%);
                  li {
                      font-size: 32px;
                      margin-left: 4px;
                      padding: 0 4px; //   background: red;
                      float: left;
                      a {
                          i {
                              font-size: 20px;
                          }
                      }
                  }
                  p {
                      text-align: center;
                  }
                  p:last-child {
                      font-size: 12px;
                  }
              }
          }
          .main {
              //   background: url("./basketball.jpg") no-repeat;
              background-size: cover;
              margin-left: -200px;
              height: 100%; //   background: green;
              overflow: hidden;
              #drew {
                  .drew;
              }
              .head {
                  color: @themeColor;
                  text-align: center;
              }
              .ct {
                  img {
                      display: block;
                      width: 100%;
                  }
              }
              .foot {
                  li {
                      color: @themeColor;
                      margin-bottom: 10px;
                      text-indent: 2em; //   list-style: disc;
                  }
                  >ul {
                      float: left;
                  }
                  .skill {
                      width: 50%;
                  }
                  .skill2 {
                      width: 50%;
                  }
              }
          }
      }
  }

  @media (max-width: 770px) {
      .icon {
          .iconUse;
          &:hover {
              opacity: .3;
          }
      }
      width: 100%;
      aside {
          width: 100%;
          height: 100%; //   background: red;
          .head {
              background-color: #999999;
              text-align: center;
              h3 {
                  height: 40px; //  font-size: 40px;
                  line-height: 40px;
                  float: left;
                  margin-left: 20px;
              }
              .dr {
                  .dropdown
              }
          }
          .ct {
              display: none;
              ul {
                  li {
                      width: 200px;
                      height: 40px;
                      padding: 4px 0;
                      a {
                          text-decoration: none;
                          &:before {
                              content: ">"
                          }
                          span {
                              font-size: 16px;
                              &:hover {
                                  color: #ffe76c;
                              }
                          }
                      }
                  }
              }
          }
          .foot {
              display: none;
              li {}
              p {}
          }
      }
      .main {
          height: 100%;
          background-size: cover;
          .head {
              h1 {
                  text-align: center;
              }
          }
          .ct {
              img {
                  width: 100%;
              }
          }
          .foot {
              width: 100%;
              li {
                  color: @themeColor;
                  margin-bottom: 10px;
                  text-indent: 2em;
              }
              >ul {
                  float: left;
              }
              .skill {
                  width: 50%;
              }
              .skill2 {
                  width: 48%;
                  padding-left: 2%;
              }
          }
      }
  }