HTML+CSS 静态页面练习

 

 效果图是以下，没有用图标引入，做的潦草了一点，重复代码也有很多，暂时没达到节约代码的水平。

<div class="all w clearfix">
    <div class="first">
      <div class="s40 firstleft fl"><i class="pt"></i><i class="pb"></i></div>
      <p class="fl">Reading</p>
      <div class="s40 firstright fr">
        <i class="yuan y1"></i>
        <i class="yuan y2"></i>
        <i class="gang g1"></i>
        <i class="gang g2"></i>
      </div>
    </div>
    <!--  -->
    <div class="second">
      <p>Difficulty level</p>
      <div class="secondbot">
        <div class="bottwo"></div>
        <i class="purpel"></i>
      </div>
    </div>
    <!--  -->
    <div class="third">
      <div class="thirtouxiang fl">SML</div>
      <div class="thirtcontent fr">
        <p>
          <span class="bul">Salut</span>,je <span class="green">m'appelle</span> Elle,
          <span class="bul">quoi</span> de <br> <span class="pink">neuf</span> aujourd'hui
        </p>
      </div>
    </div>
    <!--  -->
    <div class="fourth">
      <div class="fourthrigth fr">
        <p>Rien,juste <span>ennuye</span></p>
      </div>
    </div>
    <!--  -->
    <div class="fifth">
      <span>Quel</span>
      <span>est</span>
      <span>ton</span>
      <span>metier</span>
      <span>?</span>
    </div>
    <!--  -->
    <div class="sexth">
      <div class="sexthbox box1">
        <span>Q</span>
        <span>W</span>
        <span>E</span>
        <span>R</span>
        <span>T</span>
        <span>Y</span>
        <span>U</span>
        <span>I</span>
        <span>O</span>
        <span>P</span>
      </div>
      <div class="sexthbox box2">
        <span>A</span>
        <span>S</span>
        <span>D</span>
        <span>F</span>
        <span>G</span>
        <span>H</span>
        <span>J</span>
        <span>K</span>
        <span>L</span>
      </div>
      <div class="sexthbox box3">
        <div class="zxc jiantou fl">
          <div class="jt1"></div>
          <div class="jt2"></div>
        </div>
        <span class="fl">Z</span>
        <span class="fl">X</span>
        <span class="fl">C</span>
        <span class="fl">V</span>
        <span class="fl">B</span>
        <span class="fl">N</span>
        <span class="fl">M</span>
        <div class="zxc cha fr">
          <div class="zfx1"></div>
          <div class="zfx2">
            <div class="zfx22">
              <i class="pt"></i><i class="pb"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="sexthbox box4">
        <div class="box yiersan fl">123</div>
        <div class="space fl">space</div>
        <div class="box go fr">Go</div>
      </div>
      <div class="seventh">
        <div class="smiling fl">
          <i class="s11">.</i>
          <i class="s12">-</i>
          <i class="s13">.</i>
        </div>
        <div class="smiling fr">
          <i class="s11">.</i>
          <i class="s12">-</i>
          <i class="s13">.</i>
        </div>
      </div>
      <div class="footer">

      </div>
    </div>
  </div>

.all {
      width: 300px;
      height: 647px;
      background-color: #f5f9ff;
      border-radius: 40px;
      overflow: hidden;
    }
    .first {
      position: relative;
      width: 260px;
      height: 40px;
      margin: 40px 20px 28px 20px;
    }
    .s40 {
      width: 40px;
      height: 40px;
      background: -webkit-linear-gradient(top,#e0e3f1,#e3e3f8,#eaedfa,#f2f6fd);
      border-radius: 15px;
    }
    .firstleft .pt,
    .firstleft .pb {
      position: absolute;
      width: 10px;
      height: 10px;
      border-top: 2px solid #000;
      border-right: 2px solid #000;
    }
    .firstleft .pt{
      top: 9px;
      left: 15px;
      transform: rotate(132deg);
    }
    .firstleft .pb {
      top: 22px;
      left: 16px;
      transform: rotate(311deg);
    }
    .firstright .yuan {
      position: absolute;
      width: 8px;
      height: 8px;
      border: 3px solid #000;
      border-radius: 50px;
    }
    .firstright .y1{
      top: 10px;
      right: 22px;
    }
    .firstright .y2{
      top: 20px;
      right: 10px;
    }
    .firstright .gang {
      position: absolute;
      border: 2px solid #000;
    }
    .firstright .g1 {
      top: 13px;
      right: 10px;
      width: 10px;
    }
    .firstright .g2 {
      top: 24px;
      right: 21px;
      width: 8px;
    }
    .first p {
      width: 160px;
      line-height: 40px;
      text-align: center;
      margin-left: 10px;
      font-weight: bold;
      font-size: 15px;
    }
    /*  */
    .second {
      width: 260px;
      height: 30px;
      margin: 0 20px;
    }
    .second p {
      font-size: 5px;
      color: #ccc;
      margin-bottom: 3px;
    }
    .secondbot {
      position: relative;
      width: 260px;
      background-color: #eeeefd;
      border-radius: 50px;
    }
    .bottwo {
      width: 165px;
      border: 2px solid #7c59c3;
      border-radius: 50px;
    }
    .purpel {
      position: absolute;
      top: -3px;
      left: 165px;
      width: 12px;
      height: 6px;
      background-color: #7c59c3;
      border-radius: 5px;
    }
    /*  */
    .third {
      width: 260px;
      height: 80px;
      margin: 28px 20px 0 20px;
    }
    .thirtouxiang {
      width: 33px;
      height: 33px;
      background-color: #7c59c3;
      border-radius: 50px;
      line-height: 33px;
      color: #ccc;
      font-size: 12px;
      text-align: center;
    }
    .thirtcontent {
      width: 217px;
      height: 80px;
      background-color: #ffffff;
      border-radius: 10px 15px 15px 15px;
      box-shadow: -5px 20px 10px -4px #eaeaff;
    }
    .thirtcontent p {
      margin: 25px 0 0 19px;
      font-size: 9px;
    }
    .thirtcontent p .bul {
      color: #7b8ec7;
    }
    .thirtcontent p .green {
      color: #51aeb9;
    }
    .thirtcontent p .pink {
      color: #d98dc4;
    }
    /*  */
    .fourth {
      width: 260px;
      height: 54px;
      margin: 10px 20px 0 20px;
    }
    .fourthrigth {
      width: 140px;
      height: 54px;
      line-height: 54px;
      background-color: #7752db;
      border-radius: 20px 10px 20px 20px;
      text-align: center;
      font-size: 10px;
    }
    .fourthrigth p {
      color: #fbebff;
    }
    .fourthrigth span {
      padding-bottom: 2px;
      border-bottom: 2px dotted #bc5de3;
    }
    /*  */
    .fifth {
      width: 260px;
      height: 60px;
      line-height: 60px;
      background-color: #fff;
      border-radius: 10px 10px 20px 20px;
      margin: 36px 20px 16px 20px;
      box-shadow: 0 20px #e5e4fe;
    }
    .fifth span {
      background: -webkit-linear-gradient(top,#eaedfa,#f2f6fd,#fbfefe);
      padding: 10px 5px;
      border-radius: 15px;
      font-size: 10px;
      font-weight: 400;
    }
    .fifth span:nth-child(1) {
      margin-left: 15px;
    }
    /*  */
    .sexth {
      width: 294px;
      height: 221px;
      border-radius: 0 0 35px 35px;
      margin: 0 3px;
      background-color: #eeeffe;
      overflow: hidden;
    }
    .sexthbox.box1,
    .sexthbox.box2,
    .sexthbox.box3{
      width: 284px;
      height: 37px;
      margin: 5px;
    }
    .sexthbox.box1 span,
    .sexthbox.box2 span {
      height: 37px;
      line-height: 37px;
      padding: 8px 5px 10px 5px;
      background-color: #fff;
      margin-left: 5px;
      border-radius: 8px;
    }
    .sexthbox.box2 span:first-child {
      margin-left: 20px;
    }
    .sexthbox.box3 .zxc {
      position: relative;
      width: 40px;
      height: 37px;
      line-height: 37px;
      background-color: #fff;
    }
    .sexthbox.box3 .jiantou {
      border-radius: 15px 5px 5px 5px;
    }
    .sexthbox.box3 .jiantou .jt1{
      position: absolute;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      right: 10px;
      top: 0;
      border: 10px solid transparent;
      border-bottom-color: #0e111e;
    }
    .sexthbox.box3 .jiantou .jt2 {
      position: absolute;
      top: 20px;
      left: 16px;
      width: 10px;
      height: 10px;
      background-color: #0e111e;
    }
    .sexthbox.box3 .cha {
      border-radius: 5px 15px 5px 5px;
    }
    .sexthbox.box3 .cha .zfx1 {
      position: absolute;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      right: 27px;
      top: 12px;
      border: 8px solid transparent;
      border-right-color: #0e111e;
    }
    .sexthbox.box3 .cha .zfx2 {
      position: absolute;
      top: 12px;
      left: 13px;
      width: 15px;
      height: 15px;
      background-color: #0e111e;
    }
    .sexthbox.box3 .cha .zfx2 .zfx22 {
      position: relative;
    }
    .sexthbox.box3 .cha .zfx2 .pt,
    .sexthbox.box3 .cha .zfx2 .pb {
      position: absolute;
      width: 7px;
      height: 7px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
    }
    .sexthbox.box3 .cha .zfx2 .pt{
      top: -2px;
      left: 2px;
      transform: rotate(132deg);
    }
    .sexthbox.box3 .cha .zfx2 .pb {
      top: 8px;
      left: 2px;
      transform: rotate(311deg);
    }
    .sexthbox.box3 span {
      height: 37px;
      line-height: 37px;
      padding: 3px 5px 10px 5px;
      background-color: #fff;
      margin-left: 8px;
      border-radius: 8px;
    }
    .sexthbox.box4{
      width: 284px;
      height: 35px;
      margin: 5px;
    }
    .sexthbox.box4 .box{
      width: 67px;
      height: 35px;
      background-color: #7955da;
      color: #fff;
      line-height: 35px;
      text-align: center;
    }
    .yiersan {
      border-radius: 10px 20px 10px 20px;
    }
    .go {
      border-radius: 20px 10px 20px 10px;
    }
    .space {
      width: 140px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: #ffffff;
      margin: 0 5px;
      border-radius: 10px 10px 20px 20px;
    }
    /*  */
    .seventh {
      width: 285px;
      height: 20px;
      margin: 15px 5px 5px 5px;
    }
    .smiling {
      position: relative;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      border-radius: 50px;
      margin: 0 20px;
    }
    .smiling i {
      position: absolute;
    }
    .smiling .s11 {
      top: -15px;
      left: 2px;
      font-size: 20px;
    }
    .smiling .s12 {
      top: 2px;
      left: 4px;
    }
    .smiling .s13 {
      top: -15px;
      left: 10px;
      font-size: 20px;
    }
    .footer {
      width: 90px;
      height: 2px;
      border-radius: 3px;
      background-color: #ddddf2;
      margin: 10px 0 0 100px;
    }

body,
button,
dd,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
li,
ol,
p,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
body {
    line-height: 1.5;
    font-size: 14px;
    color: #333;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    list-style: none;
}
/* 解决图片间隙问题 */
img {
    vertical-align: middle;
}
/* 万能的清浮动样式 */
.clearfix::before,
.clearfix::after {
    content: "";
}
.clearfix::after{
    clear: both;
}
/* 左浮动 */
.fl {
    float: left;
}
/* 右浮动 */
.fr {
    float: right;
}
.w {
    width: 1200px;
    margin: 0 auto;
}