实例：
    image.png
    效果图：
    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    10. </head>
    12. <body>
    13.     <div class="user-card">
    14.         <div class="user-card-head">
    15.             asked 1 min ago
    16.         </div>
    17.         <div class="user-card-body">
    18.             <div class="user-card-body-photo">
    19.                 <a href="https://www.acwing.com/user/myspace/index/79054/" target="_blank"><img
    20.                         src="https://cdn.acwing.com/media/user/profile/photo/79054_lg_d0f775e7d7.jpg" alt="头像"></a>
    21.             </div>
    22.             <div class="user-card-body-info">
    23.                 <div class="user-card-body-info-username">
    24.                     <a href="https://www.acwing.com/user/myspace/index/79054/" target="_blank">zdkk</a>
    25.                 </div>
    26.                 <div class="user-card-body-info-reputation">
    27.                     <span style="color: #6a737c; font-weight: bold;">2,058</span>
    28.                     <div class="user-card-body-info-reputation-item" style="background-color: #ffcc01"></div>
    29.                     1
    30.                     <div class="user-card-body-info-reputation-item" style="background-color: #b4b8bc"></div>
    31.                     5
    32.                     <div class="user-card-body-info-reputation-item" style="background-color: #d1a684"></div>
    33.                     15
    34.                 </div>
    35.             </div>
    36.         </div>
    37.     </div>
    38. </body>
    40. </html>
    1. .user-card {
    2.   margin: 100px auto;
    3.   width: 200px;
    4.   height: 67.69px;
    5.   background-color: #d9eaf7;
    6.   box-sizing: border-box;
    7.   padding: 5px 6px 7px 7px;
    8.   border-radius: 2.5%;
    9. }
    11. .user-card-head {
    12.   font-size: 12px;
    13.   color: #6a737c;
    14.   margin: 1px 0 4px 0;
    15. }
    17. .user-card-body-photo {
    18.   float: left;
    19. }
    21. .user-card-body-info {
    22.   float: left;
    23.   margin-left: 8px;
    24. }
    26. .user-card-body-info-username {
    27.   height: 14px;
    28.   line-height: 14px;
    29.   margin-bottom: 2px;
    30. }
    32. .user-card-body-info-username>a {
    33.   font-size: 13px;
    34.   color: #0074cc;
    35.   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    36.   text-decoration: none;
    37. }
    42. .user-card-body-info-reputation {
    43.   font-size: 12px;
    44.   color: #838a95;
    45.   height: 16px;
    46.   line-height: 16px;
    47. }
    49. .user-card-body-photo img {
    50.   width: 32px;
    51.   height: 32px;
    52.   border-radius: 3px;
    53. }
    55. .user-card-body-info-reputation-item {
    56.   width: 6px;
    57.   height: 6px;
    58.   display: inline-block;
    59.   border-radius: 50%;
    60.   margin: 0 2px 0 2px;
    61.   position: relative;
    62.   top: -1px;
    63. }