📁 目录结构（项目结构）

web-project/
├── index.html              // 首页
├── about.html              // 关于我们
├── contact.html            // 联系我们
├── style/
│   └── main.css            // 主样式文件
├── js/
│   └── script.js           // JavaScript交互逻辑
├── img/
│   └── logo.png            // 图片资源
└── assets/
    └── fonts/              // 字体等资源

🌐 index.html（首页）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>我的个人主页</title>
  <link rel="stylesheet" href="style/main.css" />
</head>
<body>
  <header>
    <div class="container">
      <img src="img/logo.png" class="logo" />
      <nav>
        <ul>
          <li><a href="index.html">首页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="contact.html">联系我</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h1>你好，我是一名大学生</h1>
      <p>欢迎来到我的网页设计期末作业展示站</p>
      <button onclick="showAlert()">了解更多</button>
    </div>
  </section>

  <footer>
    <p>&copy; 2025 我的网页设计作业. All rights reserved.</p>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>

🎨 style/main.css（样式）

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

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
}

.container {
  width: 90%;
  margin: auto;
  overflow: hidden;
}

header {
  background: #333;
  color: #fff;
  padding: 20px 0;
}

.logo {
  float: left;
  height: 40px;
}

nav ul {
  list-style: none;
  float: right;
}

nav ul li {
  display: inline;
  margin-left: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.hero {
  background: url('../img/hero.jpg') no-repeat center center/cover;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.hero-content h1 {
  font-size: 3rem;
}

.hero-content button {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

footer {
  text-align: center;
  background: #333;
  color: white;
  padding: 10px;
}

💡 js/script.js（交互逻辑）

function showAlert() {
  alert("这是一个大学生网页设计的期末作业，展示了HTML、CSS和JS的基本应用！");
}

📄 about.html（关于页面）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>关于我</title>
  <link rel="stylesheet" href="style/main.css" />
</head>
<body>
  <header>
    <div class="container">
      <h1>关于我</h1>
      <nav>
        <ul>
          <li><a href="index.html">首页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="contact.html">联系我</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="container">
    <h2>我是XX大学计算机系的一名学生</h2>
    <p>我热爱网页设计，擅长使用HTML、CSS和JavaScript制作前端页面。</p>
  </section>

  <footer>
    <p>&copy; 2025 我的网页设计作业. All rights reserved.</p>
  </footer>
</body>
</html>

📞 contact.html（联系页面）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>联系我</title>
  <link rel="stylesheet" href="style/main.css" />
</head>
<body>
  <header>
    <div class="container">
      <h1>联系我</h1>
      <nav>
        <ul>
          <li><a href="index.html">首页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="contact.html">联系我</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="container">
    <form>
      <label>姓名：</label>
      <input type="text" placeholder="请输入您的姓名" /><br /><br />
      <label>邮箱：</label>
      <input type="email" placeholder="请输入邮箱" /><br /><br />
      <label>留言：</label><br />
      <textarea rows="4" cols="50" placeholder="请输入您的留言内容"></textarea><br /><br />
      <input type="submit" value="提交" />
    </form>
  </section>

  <footer>
    <p>&copy; 2025 我的网页设计作业. All rights reserved.</p>
  </footer>
</body>
</html>

📷 页面效果预览（建议）

你可以将页面部署到：

  • GitHub Pages
  • Vercel
  • Netlify
    或者直接在浏览器打开 index.html 查看效果。

✅ 项目亮点

  • 使用响应式布局，适配桌面与移动端；
  • 使用 JS 增加按钮交互功能；
  • 使用语义化 HTML 标签；
  • 适合期末项目答辩展示与评分；
  • 可拓展为个人博客、简历站点等；

🎁 更多建议功能扩展（加分项）

功能技术参考
图片轮播使用 Swiper 或 JS 实现
本地留言存储LocalStorage 保存留言
夜间模式切换JS + CSS 动态切换样式
动态天气预报调用开放API展示天气
响应式网格布局使用 CSS Flex/Grid

📦 打包下载方式建议

你可以将以上结构打包成 .zip 提交到老师指定平台，或通过 GitHub 创建仓库提交链接。