lovecoding
/
J250913


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>个人信息卡片</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", sans-serif;
    }
    /* 容器：模拟图中布局 */
    .info-container {
      width: 80%;
      max-width: 700px;
      margin: 50px auto;
      display: grid;
      /* 3列布局：头像列 + 标签列 + 内容列 */
      grid-template-columns: 1fr 1fr 2fr;
      gap: 1px; /* 模拟单元格分隔线 */
      background-color: #e9ecef; /* 分隔线底色 */
      border-radius: 8px;
      overflow: hidden;
    }
    /* 通用单元格样式 */
    .info-item {
      padding: 20px;
      background-color: #fff;
      color: #333;
      font-size: 16px;
    }
    /* 头像单元格：跨2行 + 浅蓝色背景 */
    .avatar {
      grid-row: 1 / 3; /* 占据第1-2行 */
      background-color: #f0f8ff;
      text-align: center;
      font-weight: 500;
    }
    /* 标签单元格（姓名、年龄、工作内容） */
    .label {
      background-color: #fff; /* 姓名标签背景色 */
      font-weight: 500;
    }
    /* 年龄单元格：改为和姓名一致的白色背景 */
    .age-item {
      background-color: #fff; /* 关键：和姓名背景统一 */
    }
    /* 工作内容：跨2列 */
    .work-content {
      grid-column: 2 / 4; /* 占据第2-3列 */
    }
  </style>
</head>
<body>
<div class="info-container">
  <!-- 头像（跨2行） -->
  <div class="info-item avatar">头像</div>
  <!-- 姓名标签 -->
  <div class="info-item label">姓名</div>
  <!-- 姓名内容 -->
  <div class="info-item">zhangsan</div>
  <!-- 年龄标签（背景改为白色） -->
  <div class="info-item label age-item">年龄</div>
  <!-- 年龄内容 -->
  <div class="info-item">18</div>
  <!-- 工作内容标签 -->
  <div class="info-item label">工作内容</div>
  <!-- 工作内容（跨2列） -->
  <div class="info-item work-content">负责项目需求对接、文档编写与团队协作，参与产品功能优化与数据监测，保障项目高效推进</div>
</div>
</body>
</html>