<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>李重阳的个人主页</title>
  <style>
    /* 重置样式 */
    * {
      margin: 0; padding: 0; box-sizing: border-box;
    }
    body {
      font-family: "微软雅黑", Arial, sans-serif;
      background: #f9f9f9;
      color: #333;
      line-height: 1.6;
    }
    header {
      background: #007ACC;
      color: white;
      padding: 20px 0;
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    header h1 {
      margin: 0;
      font-weight: normal;
      font-size: 2rem;
    }
    nav {
      background: #004A99;
    }
    nav ul {
      display: flex;
      justify-content: center;
      list-style: none;
      flex-wrap: wrap;
    }
    nav ul li {
      margin: 0 15px;
    }
    nav ul li a {
      color: white;
      text-decoration: none;
      padding: 14px 10px;
      display: block;
      font-weight: 500;
      transition: background 0.3s;
    }
    nav ul li a:hover,
    nav ul li a.active {
      background: #003366;
      border-radius: 4px;
    }
    main {
      max-width: 960px;
      margin: 30px auto;
      padding: 0 15px;
    }
    section {
      margin-bottom: 40px;
      background: white;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 0 12px rgba(0,0,0,0.05);
    }
    /* 关于我 */
    #about {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    #about img {
      border-radius: 50%;
      width: 150px;
      height: 150px;
      object-fit: cover;
      flex-shrink: 0;
    }
    #about div {
      flex: 1;
    }
    /* 作品展示 */
    #projects ul {
      list-style: disc inside;
    }
    /* 博客 */
    #blog article {
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
    #blog article:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    #blog h3 {
      color: #007ACC;
      margin-bottom: 6px;
    }
    #blog time {
      color: #999;
      font-size: 0.9rem;
      margin-bottom: 8px;
      display: block;
    }
    /* 联系方式 */
    #contact p {
      line-height: 1.8;
      font-size: 1rem;
    }
    footer {
      text-align: center;
      padding: 15px 10px;
      background: #eee;
      font-size: 0.9rem;
      color: #666;
      margin-top: 40px;
    }

    /* 响应式 */
    @media(max-width: 600px) {
      nav ul {
        flex-direction: column;
        align-items: center;
      }
      nav ul li {
        margin: 5px 0;
      }
      #about {
        flex-direction: column;
        text-align: center;
      }
      #about img {
        margin-bottom: 15px;
      }
    }
  </style>
</head>
<body>

<header>
  <h1>李重阳的个人主页</h1>
</header>

<nav>
  <ul>
    <li><a href="#about" class="active">关于我</a></li>
    <li><a href="#projects">作品展示</a></li>
    <li><a href="#blog">博客</a></li>
    <li><a href="#contact">联系我</a></li>
  </ul>
</nav>

<main>
  <section id="about">
    <img src="https://via.placeholder.com/150" alt="李重阳头像" />
    <div>
      <h2>关于我</h2>
      <p>大家好，我是李重阳，计算机科学与技术专业大学生，热爱Web前端开发和设计。喜欢学习HTML、CSS和JavaScript，致力于打造简洁美观的网页作品。</p>
      <p>闲暇时喜欢阅读技术书籍，参加校内编程比赛和开源项目。</p>
    </div>
  </section>

  <section id="projects">
    <h2>作品展示</h2>
    <ul>
      <li>校园选课系统设计与实现</li>
      <li>个人博客网站开发</li>
      <li>图书管理系统课程项目</li>
      <li>响应式企业网站模版设计</li>
    </ul>
  </section>

  <section id="blog">
    <h2>博客</h2>
    <article>
      <h3>如何高效学习JavaScript</h3>
      <time datetime="2025-06-06">2025年6月6日</time>
      <p>JavaScript是现代网页开发不可或缺的语言。掌握基础语法、DOM操作和事件机制是关键……</p>
    </article>
    <article>
      <h3>我的前端学习之路</h3>
      <time datetime="2025-05-30">2025年5月30日</time>
      <p>从零开始接触HTML和CSS，再到JavaScript，慢慢搭建起自己的第一个网站……</p>
    </article>
  </section>

  <section id="contact">
    <h2>联系我</h2>
    <p>邮箱：lizhongyang@example.com</p>
    <p>电话：138-0000-0000</p>
  </section>
</main>

<footer>
  <p>© 2025 李重阳 版权所有</p>
</footer>

<script>
  // 简单实现导航高亮滚动切换效果
  const navLinks = document.querySelectorAll('nav ul li a');
  const sections = document.querySelectorAll('main section');

  window.addEventListener('scroll', () => {
    let fromTop = window.scrollY + 80; // 头部高度 + 一点间距
    sections.forEach((section, i) => {
      if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
        navLinks.forEach(link => link.classList.remove('active'));
        navLinks[i].classList.add('active');
      }
    });
  });

  // 点击导航平滑滚动
  navLinks.forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();
      const targetId = link.getAttribute('href').substring(1);
      const targetSection = document.getElementById(targetId);
      targetSection.scrollIntoView({ behavior: 'smooth' });
    });
  });
</script>

</body>
</html>

如何使用

  1. 把上面代码复制保存为 index.html
  2. 用浏览器打开即可看到响应式效果
  3. 替换头像图片地址和内容文字，改成你自己的信息
  4. 可以根据需要，添加更多博客文章或作品
  5. 如果熟悉，可以接入 GitHub Pages 免费托管，发布个人网站

如果你想，我还能帮你：

  • 增加联系方式的留言表单（前端+后端示例）
  • 用简单 JS 做动态博客列表加载
  • 用静态网站生成器搭建更完善博客

需要告诉我！