image.png

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./20220426.css">
  9.   </head>
  10.   <body>
  11.     <div class="user-card">
  12.       <div class="user-card-head">
  13.         asked Feb 9,2019 at 18:18
  14.       </div>
  15.       <div class="user-card-body">
  16.         <div class="user-card-body-photo">
  17.           <img src="https://cdn.acwing.com/media/user/profile/photo/79551_sm_c68571038c.jpg" alt="">
  18.         </div>
  19.         <div class="user-card-body-info">
  20.           <div class="user-card-body-info-username">
  21.             <a href="#">hyy</a>
  22.           </div>
  23.           <div class="user-card-body-info-reputation">
  24.             <span style="color: #6A737C; font-weight: bold;">1,023</span> 
  25.             <div class="user-card-body-info-reputation-item" style="background-color:#FFCC01 ;"></div>
  26.             3
  27.             <div class="user-card-body-info-reputation-item" style="background-color:#B4B8Bc ;"></div>
  28.             14
  29.             <div class="user-card-body-info-reputation-item" style="background-color:#B4B8Bc ;"></div>
  30.             25
  31.           </div>
  32.         </div>
  33.       </div>
  34.     </div>
  35.   </body>
  36. </html>

CSS

  1. .user-card{
  2.   width: 200px;
  3.   height: 67.69px;
  4.   background-color: #D9EAF7;
  5.   margin: 100px auto; 
  6.   box-sizing: border-box;
  7.   padding: 5px 6px 7px 7px;
  8. }
  10. .user-card-head{
  11.   font-size: 12px;
  12.   color: #6A737C;
  13.   margin: 1px 0 4px 0;
  14. }
  15. .user-card-body-photo img {
  16.   height: 32px;
  17.   width: 32px;
  18.   border-radius: 3px;
  19. }
  21. .user-card-body-photo {
  22.   float: left;
  23. }
  25. .user-card-body-info{
  26.   float: left;
  27.   margin-left: 8px;
  28. }
  30. .user-card-body-info-username {
  31.   height: 16px;
  32.   line-height: 16px;
  33.   /* 行高=元素高 实现文字居中 */
  34. }
  35. .user-card-body-info-username > a {
  36.   font-size: 13px;
  37.   color: #0074CC;
  38.   text-decoration: none;
  39. }
  41. .user-card-body-info-reputation {
  42.   font-size: 12px;
  43.   color: #838475;
  44.   height: 16px;
  45.   line-height: 16px;
  46. }
  48. .user-card-body-info-reputation-item{
  49.   width: 6px;
  50.   height: 6px;
  51.   /* float: left; */
  52.   display: inline-block;
  53.   border-radius: 50%;
  54.   margin:0 3px 0 2px;
  55.   position: relative;
  56.   top: -2px;
  57. }