个人资料页面 html css 模板

📌 相关文章

📜 个人资料页面 html css 模板 - CSS (1)

📅 最后修改于: 2023-12-03 14:48:53.843000 🧑 作者: Mango

以下是一个基本的个人资料页面的 HTML CSS 模板，可以用作参考：

<!DOCTYPE html>
<html>
<head>
  <title>个人资料</title>
  <style>
    /* CSS 样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      color: #333;
    }
    
    .profile {
      display: flex;
      align-items: center;
    }
    
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 20px;
    }
    
    .info {
      font-size: 1.2em;
    }
    
    .info p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <h1>个人资料</h1>
  
  <div class="profile">
    <img class="avatar" src="avatar.jpg" alt="头像">
    <div class="info">
      <p>姓名: 张三</p>
      <p>年龄: 25 岁</p>
      <p>职业: 程序员</p>
      <p>邮箱: zhangsan@example.com</p>
      <p>电话: 123-456-7890</p>
    </div>
  </div>
</body>
</html>

以上代码展示了一个简单的个人资料页面。使用 HTML 和 CSS，页面包括一个标题 "个人资料"，一个包含个人信息的容器，包括姓名、年龄、职业、邮箱和电话等字段。

你可以将头像图片替换为真实的头像图片，将个人信息字段替换为实际的个人信息。你还可以自行添加其他的信息和样式来丰富页面内容。

请注意，这只是一个基本模板，你可以根据自己的需求进行修改和扩展。

希望以上模板对程序员的个人资料页面设计有所帮助！