<!DOCTYPE html>
<html>
<head>
  <title>个人主页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f1f1f1;
    }
<pre><code>h1 {
  color: #333333;
}

p {
  color: #666666;
  line-height: 1.5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</code></pre>
  </style>
</head>
<body>
  <div class='container'>
    <div class='avatar'>
      <img src='avatar.jpg' alt='Avatar'>
    </div>
    <h1>你的名字</h1>
    <p>你的个人简介</p>
    <h2>个人信息</h2>
    <ul>
      <li>年龄:xx岁</li>
      <li>性别:男/女</li>
      <li>所在地:城市,国家</li>
      <li>邮箱:youremail@example.com</li>
      <li>电话:+1234567890</li>
    </ul>
    <h2>教育经历</h2>
    <ul>
      <li>学位:xx学位</li>
      <li>学校:学校名称</li>
      <li>专业:专业名称</li>
      <li>毕业时间:xxxx年</li>
    </ul>
    <h2>工作经历</h2>
    <ul>
      <li>公司:公司名称</li>
      <li>职位:职位名称</li>
      <li>工作时间:xxxx年至今</li>
    </ul>
  </div>
</body>
</html>
<p>你可以将上述代码保存为一个HTML文件(例如index.html),然后根据自己的信息替换其中的占位符。你可以在<code>&lt;div class='avatar'&gt;</code>中插入你的头像图片(建议使用正方形图片),将<code>&lt;h1&gt;你的名字&lt;/h1&gt;</code>替换为你的姓名,将<code>&lt;p&gt;你的个人简介&lt;/p&gt;</code>替换为你的个人简介等等。根据需要,你还可以添加、删除或修改其他部分,以满足你的个人需求。</p>
免费在线生成个人主页 - 个性化展示你的个人信息

原文地址: https://www.cveoy.top/t/topic/qimW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录