<!DOCTYPE html>
<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>Document</title>
<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">39918</span>
<span class="bb">爱慕值</span>
</span>
</div>
<div class="main">
<div class="left">
<span class="c">已经收到</span>
<span class="d">19970</span>
<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>
效果
很多的不足，明天再改！