用css写微博之左侧



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Documenttitle>
    <style>
      .ranking{
        padding: 10px 14px 17px 18px;
      }
      .naver{
       width: 300px;
       height: 39px;
        display: flex;
        border: 1px solid rgba(10,10,0,1);
        justify-content: space-between;
        align-items: center;
        padding: 0 16px 0 16px;
      }
      .a{
        width: 70px;
height: 20px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 14px;
font-weight: 500;
font-family: "PingFang SC";
text-align: left;
line-height: 20px;
      }
      .aa{
        width: 42px;
height: 20px;
opacity: 1;
color: rgba(255,131,10,1);
font-size: 14px;
font-weight: 500;
font-family: "PingFang SC";
text-align: left;
line-height: 20px;
      }
      .bb{
        width: 42px;
height: 20px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 14px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 20px;
      }
    .main{
      width: 300px;
      height: 62px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 11px 14px 0 18px;
    }
    .c{
      width: 53px;
height: 17px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
    }
    .d{
      width: 39px;
height: 20px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 14px;
font-weight: 700;
font-family: "PingFang SC";
text-align: left;
line-height: 20px;
    }
  .ee{
    width: 48px;
height: 25px;
opacity: 1;
color: rgba(255,255,255,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: center;
line-height: 25px;
  }
  .e{
    width: 70px;
height: 26px;
border-radius: 2px;
opacity: 1;
background: rgba(255,129,64,1);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
margin-top: 8px;
margin-bottom: 0;
display: flex;
justify-content: center;
align-items: center;
  }
  .picture{
    width: 48px;
height: 48px;
opacity: 1;
  }
.word{
  width: 268px;
height: 34px;
opacity: 1;
color: rgba(128,128,128,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
margin-left: 18px;
margin-top: 10px;
}
.x{
  width: 116px;
height: 17px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
margin-left: 18px;
margin-top: 6px;
}

.y{
  width: 37px;
height: 17px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 12px;
font-weight: 600;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
}
.z{
  width: 43px;
height: 17px;
opacity: 1;
color: rgba(235,115,80,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
line-height: 17px;
margin-left: 74px;
}
.row{
  /*display: flex;
  justify-content: space-between;*/
  width: 300px;
  height: 17px;

}
.footer{
  width: 331px;
  height: 100%;
 /* border: 1px solid rgba(255,129,64,1);*/
}
style>
  head>
  <body>

    <div class="ranking">
      <div class="naver">
      <span class="a">明星势力榜span>
      <span class="b">
        <span class="aa">39918span>
        <span class="bb">爱慕值span>
      span>
       div>

      <div class="main">

        <div class="left">
          <span class="c">已经收到span>
          <span class="d">19970span>
          <span class="c">朵花span>
          <div class="e">
            <div class="ee">立即送花div>
          div>
        div>


        <div class="right">
          <img  class="picture" src="file:///C:/Users/han/AppData/Local/Temp/Rar$DIa13360.1648/Mask%20Group.png">
        div>
      div>


      <div class="footer">
        <div class="word">送花可增加明星的爱慕值,帮助明星在微博中获得更多曝光机会。div>
        <div class="row">
          <span class="x">我是娜扎 内地榜排行span>
          <span class="y">第51名span>
          <span class="z">去看看?span>
        div>
      div>

    div>
  body>
html>

效果
用css写微博之左侧_第1张图片
很多的不足,明天再改!

你可能感兴趣的:(web,css,css3,html)