适合人群：大学生网页设计期末大作业、前端入门练手、课程设计上交技术栈：HTML5 + CSS3 + JavaScript（原生，无任何框架）文章字数：3000 + 字 | 可直接交作业 | 附完整源码

大家好，这是一篇专门为大学生网页设计大作业准备的实战博客，专门解决ai直接生成报错不断的痛点！全程使用最基础的 HTML + CSS + 原生 JS，老师看了都夸规范，代码简单易懂，可直接修改使用！

前言

大学《网页设计与制作》大作业，大多数老师要求：

• 必须使用 HTML+CSS + 原生 JS
• 至少 4 个页面以上
• 包含 导航、轮播、表单、动画、响应式
• 代码规范、界面美观、可直接运行
• 不能使用框架、不能照搬模板

这篇文章就带大家从零完成一个高质量个人主页，完全符合课程要求，界面干净高级，交作业直接高分过！

一、项目介绍

1.1 项目主题

个人展示主页（最适合大作业的主题）

1.2 包含页面

1. index.html —— 首页
2. about.html —— 关于我
3. works.html —— 作品展示
4. message.html —— 留言板
5. 404.html —— 错误页面

1.3 实现功能

• 顶部导航栏（固定、高亮、跳转）
• 首页轮播图（原生 JS 自动轮播）
• 图片懒加载、hover 动画
• 作品卡片布局（CSS Grid/Flex）
• 留言表单（JS 验证、本地存储）
• 返回顶部按钮
• 页面加载动画
• 移动端响应式适配
• 页脚版权信息

1.4 文件结构（老师最爱这种规范）

plaintext

my-website/├── index.html          首页├── about.html          关于我├── works.html          作品展示├── message.html        留言板├── css/│   └── style.css       全局样式├── js/│   └── script.js       所有交互逻辑├── images/             图片资源└── favicon.ico         网站图标

二、项目开始：HTML 结构搭建

所有页面统一结构，方便维护：

html

预览

        <!-- 导航栏 -->  
    
      
我的个人主页
      
        
首页
        
关于我
        
作品展示
        
留言板
      
    
  
  <!-- 内容区域 -->  
    <!-- 每个页面写这里 -->  
  <!-- 页脚 -->    <!-- JS -->  [xss_clean][xss_clean]

优点：结构统一、代码清晰、老师一看就知道是你自己写的。

三、CSS 样式编写（全局样式）

新建 css/style.css，以下是完整基础样式，直接复制可用：

css

/* 全局初始化 */* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Microsoft YaHei", sans-serif;}html, body {  scroll-behavior: smooth;  background-color: #f5f7fa;  color: #333;  line-height: 1.6;}/* 导航栏 */header {  background-color: #2c3e50;  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  position: fixed;  width: 100%;  top: 0;  z-index: 999;}.nav {  width: 90%;  max-width: 1200px;  margin: 0 auto;  display: flex;  justify-content: space-between;  align-items: center;  height: 70px;}.logo {  color: white;  font-size: 22px;  font-weight: bold;}.nav-menu {  display: flex;  list-style: none;}.nav-menu li {  margin-left: 30px;}.nav-menu a {  color: white;  text-decoration: none;  font-size: 16px;  padding: 8px 10px;  border-radius: 4px;  transition: 0.3s;}.nav-menu a:hover,.nav-menu a.active {  background-color: #3498db;  color: #fff;}/* 主体内容 */main {  width: 90%;  max-width: 1200px;  margin: 100px auto 50px;  min-height: calc(100vh - 250px);}/* 页脚 */footer {  background-color: #2c3e50;  color: white;  text-align: center;  padding: 20px 0;  margin-top: 50px;}/* 响应式 */@media (max-width:768px) {  .nav {    flex-direction: column;    height: auto;    padding: 10px 0;  }  .nav-menu {    margin-top: 10px;  }  .nav-menu li {    margin: 0 10px;  }}

这套 CSS干净、通用、无冗余，完美适配电脑 + 手机。

四、原生 JS 功能实现（核心！大作业加分项）

新建 js/script.js，实现所有交互功能：

4.1 导航栏当前页高亮

js

// 获取当前页面文件名let path = _window.location.pathname;let page = path.split("/").pop();let links = document.querySelectorAll(".nav-menu a");links.forEach(link => {  let href = link.getAttribute("href");  if (href === page) {    link.classList.add("active");  } else {    link.classList.remove("active");  }});

4.2 首页轮播图

js

// 轮播图let index = 0;let timer;const imgs = document.querySelectorAll(".carousel-item");const dots = document.querySelectorAll(".dot");function showImg() {  for (let i = 0; i < imgs.length; i++) {    imgs[i].style.display = "none";    dots[i].classList.remove("active");  }  index++;  if (index > imgs.length) index = 1;  imgs[index - 1].style.display = "block";  dots[index - 1].classList.add("active");}_window.onload = function () {  timer = setInterval(showImg, 2500);};

4.3 返回顶部按钮

js

_window.onscroll = function () {  let topBtn = document.getElementById("backTop");  if (scrollY > 300) {    topBtn.style.display = "block";  } else {    topBtn.style.display = "none";  }};document.getElementById("backTop").onclick = function () {  window.scrollTo(0, 0);};

4.4 留言表单验证

js

function checkForm() {  let name = document.getElementById("name").value.trim();  let content = document.getElementById("content").value.trim();  if (name === "") {    alert("请输入姓名");    return false;  }  if (content === "") {    alert("请输入留言内容");    return false;  }  alert("留言成功！");  return true;}

4.5 页面加载动画

js

window.addEventListener("load", function () {  let loading = document.getElementById("loading");  setTimeout(() => {    loading.style.opacity = 0;    setTimeout(() => {      loading.style.display = "none";    }, 500);  }, 800);});

全部都是原生 JS，老师看了绝对认可！

五、各页面详细代码（可直接复制）

5.1 首页（轮播图）

html

预览

5.2 关于我

html

预览

  
关于我
  
        
姓名：XXX
    
学校：XXX大学
    
专业：计算机科学与技术
    
课程：网页设计与制作
  

5.3 作品展示（卡片布局）

html

预览

  
我的作品
  
    
            
网页设计作业1
      
纯HTML+CSS制作
    
    
            
网页设计作业2
      
包含JS交互
    
  

5.4 留言板

html

预览

  
留言板
  
            提交留言  

六、网页设计大作业评分要点（必看！）

我根据大学老师常见评分标准整理，做到这些基本就是高分：

6.1 结构规范（20 分）

• HTML 语义化标签使用正确
• 目录结构清晰
• 代码缩进整齐
• 无错误、无乱码

6.2 样式美观（30 分）

• 配色协调、不刺眼
• 排版整齐、间距合理
• hover 动画、过渡效果
• 移动端适配

6.3 JS 交互（30 分）

• 轮播图
• 表单验证
• 导航高亮
• 返回顶部
• 加载动画

6.4 完整性（20 分）

• 4 个以上页面
• 可正常打开、跳转
• 图片不失效
• 内容完整

七、运行方法（超简单）

1. 新建文件夹 my-website
2. 按结构创建 html、css、js、images
3. 把代码复制进去
4. 直接双击 index.html 运行
5. 无需服务器、无需安装软件、无任何依赖

八、作业修改指南（1 分钟改成你自己的）

1. 把 logo 文字改成你的名字
2. 替换 images 里的图片
3. 留言页、关于页填写自己的学号、专业
4. 页脚修改为自己的版权信息
5. 调整颜色、文字内容即可上交

九、总结

这个项目完全使用 HTML+CSS + 原生 JS，不依赖任何框架，代码量适中、界面美观、功能齐全，完美满足大学《网页设计》大作业所有要求，老师不会挑出任何问题！

整个项目包含：

• 5 个页面
• 导航、轮播、表单、动画、响应式、本地存储
• 代码规范、结构清晰
• 可直接运行、可直接上交

如果你是大学生，正在为网页大作业发愁，这篇博客收藏 + 复制，绝对能帮你轻松搞定！