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-background"></div>
    15.       <div class="user-card-body">
    16.         <div class="user-card-body-left">
    17.           <img src="https://cdn.acwing.com/media/user/profile/photo/79054_lg_d0f775e7d7.jpg" alt="头像">
    18.         </div>
    19.         <div class="user-card-body-right">
    20.           <div class="user-card-body-right-text">
    21.             <div class="user-card-body-right-text-username">
    22.               带刀的猪
    23.               <span>Lv5</span>
    24.             </div>
    25.             <div class="user-card-body-right-text-reputation">
    26.               <span class="user-card-body-right-text-reputation-item">
    27.                 <span>148</span>
    28.                 <span>关注</span>
    29.               </span>
    30.               <span class="user-card-body-right-text-reputation-item">
    31.                 <span>4</span>
    32.                 <span>粉丝</span>
    33.               </span>
    34.               <span class="user-card-body-right-text-reputation-item">
    35.                 <span>9</span>
    36.                 <span>获赞</span>
    37.               </span>
    38.             </div>
    39.           </div>
    40.           <div class="user-card-body-right-button">
    41.             <button>+关注</button>
    42.             <button>发消息</button>
    43.           </div>
    44.         </div>
    45.       </div>
    46.     </div>
    47.   </body>
    49. </html>
    1. .user-card {
    2.   height: 215px;
    3.   width: 366px;
    4.   box-shadow: 2px 2px 5px lightgray;
    5.   border-radius: 5px;
    7. }
    9. .user-card-background {
    10.   background-image: url('/static/images/bilibili.jpg');
    11.   background-size: cover;
    12.   width: 100%;
    13.   height: 85px;
    14. }
    16. .user-card-body {
    17.   width: 100%;
    18.   height: calc(100% - 85px);
    19.   box-sizing: border-box;
    20.   padding-top: 12px;
    21. }
    23. .user-card-body-left {
    24.   width: 70px;
    25.   height: 100%;
    26.   float: left;
    27.   text-align: center;
    28. }
    30. .user-card-body-left>img {
    31.   width: 48px;
    32.   height: 48px;
    33.   border-radius: 50%;
    34.   border: 1px solid lightsteelblue;
    35. }
    37. .user-card-body-right {
    38.   width: calc(100% - 70px);
    39.   height: 100%;
    40.   float: left;
    41. }
    43. .user-card-body-right-text {
    44.   width: 100%;
    45.   height: 70%;
    46.   box-sizing: border-box;
    47. }
    49. .user-card-body-right-text-username {
    50.   font-size: 16px;
    51.   color: #222222;
    52.   font-weight: bold;
    53.   margin-bottom: 10px;
    54. }
    56. .user-card-body-right-text-reputation {}
    58. .user-card-body-right-text-username>span {
    59.   font-style: italic;
    60.   font-size: 12px;
    61.   color: #8bd29b;
    62.   padding: 0 0 0 6px;
    63. }
    65. .user-card-body-right-text-reputation-item>span:nth-child(1) {
    66.   font-size: 12px;
    67.   color: #222222;
    68. }
    70. .user-card-body-right-text-reputation-item>span:nth-child(2) {
    71.   font-size: 12px;
    72.   color: #9499a0;
    73.   margin-right: 20px;
    74. }
    76. .user-card-body-right-button {
    77.   width: 100%;
    78. }
    80. .user-card-body-right-button button {
    81.   width: 102px;
    82.   height: 30px;
    83.   margin-right: 6px;
    84.   border-radius: 5px;
    85.   /* 鼠标放在该元素上变成小手 */
    86.   cursor: pointer;
    88. }
    90. .user-card-body-right-button>button:nth-child(1) {
    91.   background-color: #00A1D6;
    92.   color: white;
    93.   font-size: 16px;
    94.   border-style: none;
    95. }
    97. .user-card-body-right-button>button:nth-child(2) {
    98.   background-color: white;
    99.   color: #6d757a;
    100.   font-size: 16px;
    101.   border: 1px #ccd0d7 solid;
    102. }
    104. .user-card-body-right-button>button:nth-child(1):hover {
    105.   opacity: 0.8;
    106.   transition: 400ms;
    107. }
    109. .user-card-body-right-button>button:nth-child(2):hover {
    110.   border-color: #00b5e5;
    111.   color: #00b5e5;
    112.   transition: 400ms;
    113. }