HTMl+CSS练习

<div class="bgc">
    <div class="bgc-con">
      <div class="bgc-con-top">
        <ul>
          <li class="fl"><span>Chat</span></li>
          <li class="fr">
            <a href="#" class="red"></a>
            <a href="#" class="green"></a>
            <a href="#" class="yellow"></a>
            <a href="#" class="blue"></a>
          </li>
        </ul>
      </div>
      <div class="bgc-con-bot">
        <ul>
          <li class="list-first fl">
            <div class="list-left fl">
              <p class="p1">PrivocY and Support</p>
              <p class="p2">Qet Immediote Support</p>
            </div>
            <div class="list-right fr">
              <a href="#"><p></p></a>
            </div>
          </li>
          <li class="list-second fr color_pur">
            <p>Good Day!</p>
          </li>
          <li class="list-third fr color_pur">
            <p>I'm looking for gift editions of<br>
            the Horry Potter Books.Do you <br>
          hove them?</p>
          </li>
          <li class="list-fourth fl">
            <p>Good Day!</p>
          </li>
          <li class="list-fifth fr">
            <p>we hove 3 populor gift aditions <br>
            of the Horry Potter books.which <br>
          one would you like?</p>
          <a href="#" class="greens"></a>
          <a href="#" class="reds"></a>
          <a href="#" class="purples"></a>
          </li>
          <li class="touxiang fl">
            <a href="#">SML</a>
          </li>
          <li class="sixth fr color_pur">
            <p>I think the middle one is the <br>
            one I was loking for.</p>
          </li>
          <li class="seventh fr color_pur">
            <p>can you odd it to the cart please?</p>
          </li>
          <li class="eigth fr">
            <a href="#" class="leftone1 fl"><p></p></a>
            <a href="#" class="lefttwo fl"><p>write a message...</p></a>
            <a href="#" class="leftone2 fr"><p></p></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

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;
}

    .bgc-con {
      width: 300px;
      height: 800px;
      background-color: #eee8dc;
      border-radius: 20px;
    }
    .bgc-con-top {
      width: 300px;
      height: 100px;
    }
    .bgc-con-top li {
      margin-top: 20px;
    }
    .bgc-con-top li span {
      line-height: 50px;
      font-size: 20px;
      font-weight: bold;
      color: #7f6a61;
      margin-left: 15px;
    }
    .bgc-con-top li.fr{
      position: relative;
      background-color:#fcf8f5;
      margin-right: 10px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
    }
    .bgc-con-top li.fr a{
      display: block;
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .red {
      background-color: red;
      top: 18px;
      left: 18px;
    }
    .green {
      background-color: green;
      top: 18px;
      left: 32px;
    }
    .yellow {
      background-color: yellow;
      top: 32px;
      left: 18px;
    }
    .blue {
      background-color: blue;
      top: 32px;
      left: 32px;
    }
    /*  */
    .bgc-con-bot {
      width: 280px;
      height: 690px;
      margin: 0 10px;
      background-color: #e1d3c6;
      border-radius: 20px;
      padding-top: 10px;
    }
    .list-first{
      width: 270px;
      height: 65px;
      background-color: #efe8e2;
      border-radius: 20px;
      margin: 0 5px;
    }
    .list-left {
      margin: 12px;
    }
    .list-left .p1 {
      font-weight: bold;
      color: #908277;
    }
    .list-left .p2 {
      color: #bdafa6;
    }
    .list-right a {
      position: relative;
      display: block;
      width: 40px;
      height: 40px;
      background-color: #fcf8f5;
      border-radius: 50%;
      margin: 10px;
    }
    .list-right p {
      position: absolute;
      top: 14px;
      left: 13px;
      width: 10px;
      height: 10px;
      border-top: 2px solid #908277;
      border-right: 2px solid #908277;
      transform: rotate(45deg);
    }
    .color_pur {
      background-color: #9083b8;
      color: #d1caef;
      font-size: 10px;
    }
    .list-second {
      width: 112px;
      height: 40px;
      border-radius: 50px 60px 0 50px;
      text-align: center;
      line-height: 40px;
      margin: 70px 5px 0 0;
    }
    .list-third {
      width: 220px;
      height: 78px;
      margin-top: 5px;
      border-radius: 20px 20px 0 20px;
      margin-right: 5px;
    }
    .list-third p {
      text-align: left;
      margin: 10px 20px;
    }
    .list-fourth,
    .list-fifth {
      background-color: #fdf8f5;
      font-size: 10px;
      color: #7f6a61;
    }
    .list-fourth {
      width: 112px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 7px 0 0 50px;
      border-radius: 60px 50px 60px 0;
    }
    .list-fifth {
      width: 224px;
      height: 196px;
      margin-right: 5px;
      margin-top: 5px;
      border-radius: 20px 20px 20px 0;
    }
    .list-fifth p {
      margin: 19px 19px 10px 19px;
    }
    .list-fifth a {
      display: inline-block;
      width: 54px;
      height: 92px;
      border-radius: 10px 3px 3px 10px;
    }
    .list-fifth .greens {
      background-color: #598d5b;
      margin-left: 18px;
    }
    .list-fifth .reds {
      background-color: #e06665;
      margin: 0 10px;
    }
    .list-fifth .purples {
      background-color: #766498;
    }
    .touxiang {
      width: 45px;
      height: 45px;
      background-color: #fdf7f7;
      border-radius: 50%;
      line-height: 45px;
      text-align: center;
      margin: -44px 4px;
    }
    .touxiang a{
      color: #766498;
    }
    .sixth,
    .seventh {
      border-radius: 20px 20px 0 20px;
      margin-top: 5px;
      margin-right: 5px;
    }
    .sixth {
      width: 209px;
      height: 57px;
    }
    .sixth p {
      margin: 10px 20px;
    }
    .seventh {
      width: 224px;
      height: 43px;
    }
    .seventh p {
      margin: 12px 15px;
    }
    .eigth {
      width: 270px;
      height: 52px;
      margin: 10px 5px;
    }
    .eigth .leftone1,
    .eigth .leftone2 {
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .eigth .leftone1 {
      background-color: #fdf8f5;
    }
    .eigth .leftone2 {
      background-color: #f05f64;
    }
    .eigth .leftone1 p,
    .eigth .leftone2 p {
      position: absolute;
      width: 12px;
      height: 12px;
      transform: rotate(45deg);
    }
    .eigth .leftone1 p {
      bottom: 18px;
      right: 18px;
      border-bottom: 2px solid #7f6a61;;
      border-left: 2px solid #7f6a61;;
    }
    .eigth .leftone2 p {
      top: 18px;
      left: 18px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
    }
    .lefttwo {
      width: 160px;
      height: 50px;
      background-color: #fcf8f5;
      margin: 0 5px;
      border-radius: 50px;
      font-size: 10px;
    }
    .lefttwo p {
      margin: 16px;
      color: #7f6a61;
    }