8.1 响应式个人简介页面

项目目标

构建一个简洁美观的个人简介页面，支持在不同设备（手机、平板、桌面）上良好的显示效果。

1. 需求分析

页面模块：
1. 个人头像及基本信息
2. 技能展示（进度条或标签）
3. 工作经历和项目经验
4. 联系方式（社交媒体图标或联系表单）
响应式设计：
- 移动端：单列布局，内容垂直排列。
- 平板端：双列布局，头像和简介一侧，技能和经历另一侧。
- 桌面端：三列布局，充分利用屏幕宽度。

2. 代码实现

2.1 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简介</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1>张三</h1>
    <p>前端开发工程师 | 创造者</p>
  </header>
  <main class="main">
    <section class="profile">
      <img src="avatar.jpg" alt="张三的头像" class="avatar">
      <p>你好！我是张三，一名专注于前端开发的工程师，热爱技术创新与用户体验设计。</p>
    </section>
    <section class="skills">
      <h2>技能</h2>
      <ul>
        <li>HTML/CSS <span class="progress" style="width: 90%;"></span></li>
        <li>JavaScript <span class="progress" style="width: 85%;"></span></li>
        <li>React <span class="progress" style="width: 80%;"></span></li>
      </ul>
    </section>
    <section class="experience">
      <h2>工作经历</h2>
      <ul>
        <li>
          <h3>前端工程师 - ABC 公司</h3>
          <p>2020 - 2023</p>
          <p>参与开发多个大型项目，优化性能并提升用户体验。</p>
        </li>
      </ul>
    </section>
    <section class="contact">
      <h2>联系我</h2>
      <ul>
        <li><a href="https://github.com">GitHub</a></li>
        <li><a href="mailto:[email protected]">Email</a></li>
      </ul>
    </section>
  </main>
  <footer class="footer">
    <p>© 2025 张三的个人简介</p>
  </footer>
</body>
</html>

2.2 CSS 样式

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f9f9f9;
  padding: 20px;
}

/* Header */
.header {
  text-align: center;
  margin-bottom: 20px;
}

/* Main Layout */
.main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.avatar {
  width: 100%;
  max-width: 150px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

.skills .progress {
  display: block;
  height: 10px;
  background: #4caf50;
  margin-top: 5px;
  border-radius: 5px;
}

.contact ul {
  list-style: none;
  text-align: center;
}

.contact ul li a {
  color: #007bff;
  text-decoration: none;
}

/* Footer */
.footer {
  text-align: center;
  margin-top: 20px;
}

/* Responsive Design */
@media (min-width: 768px) {
  .main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .main {
    grid-template-columns: repeat(3, 1fr);
  }
}

3. 总结

核心技巧：
- 使用 grid 布局实现不同设备的响应式设计。
- 通过媒体查询优化布局。
扩展功能：
- 可以通过引入动画为技能进度条增加动态效果。
- 添加更多交互式元素，如动态表单验证或社交媒体图标动画。

这个项目提供了基础的个人简介页面实现，后续可根据需求进行更进一步的增强和个性化设计。

#前端开发分享于 2025-03-11

上一篇：7.5 CSS 的无障碍设计下一篇：8.2 动态交互式产品展示页面