响应式个人简历，提升职业竞争力

2023-12-19 11:01:20

在当今竞争激烈的就业市场中，个人简历已成为求职者不可或缺的利器，而响应式简历网页更是为您的简历锦上添花，提升职业竞争力。

响应式个人简历网页不仅可以在桌面端完美展示，还能够自动适应移动设备，确保无论求职者通过何种设备访问，都能获得流畅的浏览体验。这不仅体现了求职者的专业素养，更让招聘官在初次接触时留下深刻印象。

本教程将指导您创建一款响应式个人简历网页，无需联网，即可在电脑和手机上流畅展示。

1. HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Jane Doe</h1>
    <p>Software Engineer</p>
    <ul>
      <li>
        <a href="#about">About Me</a>
      </li>
      <li>
        <a href="#skills">Skills</a>
      </li>
      <li>
        <a href="#experience">Experience</a>
      </li>
      <li>
        <a href="#education">Education</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
    <div id="about">
      <h2>About Me</h2>
      <p>I am a software engineer with 5 years of experience in building and maintaining web applications. I am passionate about creating user-friendly and efficient software that solves real-world problems.</p>
    </div>
    <div id="skills">
      <h2>Skills</h2>
      <ul>
        <li>JavaScript</li>
        <li>React</li>
        <li>Node.js</li>
        <li>MongoDB</li>
      </ul>
    </div>
    <div id="experience">
      <h2>Experience</h2>
      <div class="job">
        <h3>Software Engineer</h3>
        <h4>Google</h4>
        <p>2018 - Present</p>
        <ul>
          <li>Designed and implemented a new feature for Google Search</li>
          <li>Developed and maintained a microservice used by millions of users</li>
        </ul>
      </div>
      <div class="job">
        <h3>Web Developer</h3>
        <h4>Amazon</h4>
        <p>2016 - 2018</p>
        <ul>
          <li>Built and maintained a high-traffic e-commerce website</li>
          <li>Optimized the website for performance and search engine optimization</li>
        </ul>
      </div>
    </div>
    <div id="education">
      <h2>Education</h2>
      <div class="school">
        <h3>Master of Science in Computer Science</h3>
        <h4>Stanford University</h4>
        <p>2014 - 2016</p>
      </div>
      <div class="school">
        <h3>Bachelor of Science in Computer Science</h3>
        <h4>University of California, Berkeley</h4>
        <p>2010 - 2014</p>
      </div>
    </div>
    <div id="contact">
      <h2>Contact</h2>
      <ul>
        <li>
          <a href="mailto:jane.doe@email.com">jane.doe@email.com</a>
        </li>
        <li>
          <a href="https://github.com/janedoe">github.com/janedoe</a>
        </li>
        <li>
          <a href="https://linkedin.com/in/janedoe">linkedin.com/in/janedoe</a>
        </li>
      </ul>
    </div>
  </main>
</body>
</html>

2. CSS 样式

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  margin-top: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  color: #333;
}

#about, #skills, #experience, #education, #contact {
  padding: 30px;
  margin-top: 30px;
}

h2 {
  margin-top: 0;
}

.job {
  margin-bottom: 30px;
}

.job h3 {
  margin-bottom: 10px;
}

.school {
  margin-bottom: 30px;
}

.school h3 {
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  li {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
  }

  #about, #skills, #experience, #education, #contact {
    padding: 20px;
    margin-top: 20px;
  }
}