尧图网站建设 
简介这是一份面向大学生静态网页设计期末作业、毕业设计及课程设计的高分参考模板适合需要快速完成完整网页作品、又希望拿到高分的新手开发者。压缩包为zip格式共31个文件包含5个HTML页面、1个CSS样式表、2个JS交互脚本、21张JPG图片及1份README说明文档总大小约30.27MB。其中HTML构建页面结构CSS统一整体风格JS实现日历与表单校验等交互效果图片则作为页面视觉素材。目前已有514人学习/下载可见其贴合多数高校静态网页课程要求。资源包含主页、漫画分享、照片墙、留言板和关于我等模块覆盖图文排版、导航链接、相册展示、表单验证等常见考点代码逐段注释目录结构清晰下载后按README简单部署即可运行既可直接用于提交也可作为高分范例参考学习方便二次修改与个性化定制。1. 静态网页设计期末作业先把完整和99分拆开看很多同学拿到期末的静态网页设计题目时第一反应是上网找模板或者往页面里塞一堆用不上的特效插件结果交上去的作业要么在老师电脑上图片乱飞要么 CSS 文件缺了一个导致整页错位。做这门课的作业目标不是看起来炫而是代码完整、下载即用。99 分和 90 分的差距通常不在技术难度而在页面是否处处可点、文件是否干净、刷新是否稳定。下面按一份高分的静态网页设计期末作业该有的顺序从选题、HTML 骨架、CSS 布局、JavaScript 交互一直讲到交作业前的自检清单中间给出可以直接照改的代码。写之前把思路理清后面每个页面都是顺手的活。2. 静态网页的题材选择与文件结构99分的第一步是目录不乱2.1 先选题页数、内容与评分点的对应关系静态网页设计作业最常见的失败不是代码写错而是题材没选好。期末评分通常看结构是否完整、样式是否统一、交互是否可用、代码是否规范并不看页面里的图片有多花哨。所以选题要优先考虑内容能不能撑起 48 个页面个人作品集、地方美食介绍、校园风景展示、读书笔记、旅游攻略都是容易凑满素材的类型。题材类型大致页数可以展示的技术点个人作品集46网格布局、页面跳转、图片 hover 效果地方美食介绍58图文混排、卡片样式、导航锚点校园风景展示46大图 banner、相册网格、懒加载图片读书笔记57列表样式、引用块、章节锚点跳转选完题材后还要确定页面职责我一般会把页面分成内容页和功能页两类。内容页负责展示素材比如作品、风景图、美食介绍用来体现布局和排版能力功能页就是关于我和联系我们用来放表格、表单和文字说明。两类页面加起来够 5 个以上结构上就显得完整不至于让老师觉得这只是一个单页练习。2.2 文件目录这样组织下载即用的关键是相对路径下载即用这四个字本质上是相对路径写对了。把整个工程文件夹压缩发出去别人解压后双击打开就能看到完整效果靠的不是打包技术而是页面里所有引用都指向自己文件夹内部的相对地址。下面是用 tree 命令看到的常见工程结构web_project/ ├── index.html # 首页 ├── about.html # 关于页 ├── gallery.html # 作品/图库页 ├── contact.html # 联系页含表单 ├── css/ │ └── style.css # 全站共用样式 ├── js/ │ └── main.js # 全站共用脚本 ├── images/ # 页面用到的所有图片 │ ├── hero.jpg │ └── pic-01.png └── README.txt # 给评审看的说明常见错误是图片路径写成D:/web_project/images/hero.jpg这种绝对路径或者写成../images/hero.jpg却想当然地多退了一层目录。文件夹挪位置之后这两种写法都会变成破图。正确做法是CSS 里用url(../images/hero.jpg)HTML 里用images/hero.jpg路径基准始终是当前文件所在位置而不是我电脑上的位置。2.3 HTML 骨架里的加分细节DOCTYPE、meta 与语义化标签一份能拿高分的静态页 HTML开头几行就能看出基本功。下面这个骨架可以直接用作所有页面的模板主要包含 head 里的元信息、body 里的语义化结构以及底部版权区每一部分都有对应的打分点。实际使用时只需要替换 title、导航菜单和 main 里的内容改动量很小。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人作品集网站展示UI作品与摄影练习 title我的作品集 - 首页/title link relstylesheet hrefcss/style.css /head body header nav ul classnav-list lia hrefindex.html classactive首页/a/li lia hrefgallery.html作品/a/li lia hrefabout.html关于/a/li lia hrefcontact.html联系/a/li /ul /nav /header main h1欢迎来到我的作品集/h1 p这里展示我在课程期间完成的界面设计与摄影作品。/p /main footer p© 2024 课程期末作业/p /footer /body /html!DOCTYPE html让浏览器以标准模式渲染避免兼容模式的布局偏差很多为什么我的页面和同学的不一样的问题根源就在少了这一行。viewportmeta 控制移动端预览时的缩放没有它手机打开页面会横向缩小到看不清。description对显示效果没直接影响但它是代码规范性的体现评审看源码时这里有内容说明做作业的人不只是在应付。标签层面用header、nav、main、footer替代满屏div页面在没有 CSS 时也能按区块读懂。图片都写alt属性既是无障碍要求也避免图片加载失败时显示破图。每个页面只保留一个h1下面按h2、h3逐级展开这是评分里最常见的规范性扣分点写多写混都很亏。提示页面标题title要和导航里的名称保持一致比如首页的 title 是我的作品集 - 首页而不是统一都叫我的作品集。老师开多个标签页时标签上能分清每个页面体验会好很多。3. 把静态网页做得像设计过CSS 的三个必拿分模块3.1 用 CSS 变量定基调避免五颜六色作业分数上不去最常见的原因不是排版难而是颜色太多。拿高分的做法通常是给全站定两三个主色、一个强调色统一使用。CSS 自定义属性变量能把这种约束写进代码里:root { --primary: #2c3e50; --accent: #e67e22; --bg: #f8f9fa; --text: #333; --radius: 10px; } body { background: var(--bg); color: var(--text); font-family: PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; margin: 0; } a { color: var(--accent); text-decoration: none; } .nav-list a.active, .nav-list a:hover { color: var(--primary); border-bottom: 2px solid var(--accent); }变量统一写在:root里后续每个页面直接引用。想换主题色时只改:root一处全站同步更新对比每页单独写颜色的作业可维护性一眼可见。--radius保证所有卡片、按钮的圆角一致避免同一页出现三种圆角。line-height: 1.7是正文阅读比较舒服的行高比默认的 1.2 更适合中文内容这是很多模板里没调、但实际很影响观感的参数。3.2 Flex 与 Grid 的选用边界什么时候用哪一个页面里最常见的两种布局需求一是一行导航横向排开二是作品卡片整齐对齐。一个用 Flexbox一个用 Grid这是期末作业里最稳妥的分工/* 导航Flex 负责一维排列和对齐 */ .nav-list { display: flex; gap: 24px; justify-content: center; align-items: center; list-style: none; } /* 作品网格Grid 负责二维行列布局 */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .card-grid img { width: 100%; height: auto; border-radius: var(--radius); transition: transform 0.2s ease; } .card-grid img:hover { transform: scale(1.03); }Flex 的gap: 24px直接控制项目间距不用再给每个li加 margin。justify-content: center管水平居中align-items: center管垂直居中两个一配合导航居中是最快的写法。Grid 的repeat(auto-fill, minmax(240px, 1fr))表示每列至少 240px容器够宽就多排几列不够就自动换行这段代码本身就实现了不同屏幕下网格自适应比写死grid-template-columns: 1fr 1fr 1fr更能拿分。布局场景首选方案判断依据导航、按钮组、单行对齐Flexbox一维排列对齐属性直观作品卡片、相册网格Grid二维行列自动填充列数单元素水平垂直居中Flexbox两句声明即可解决注意真要给 Grid 写死列数也优先用repeat(3, 1fr)配合minmax做兜底避免在窄屏上三列被压成一条缝。作业验收时老师通常会把窗口拖窄看一眼这一步做好能避免很多尴尬。3.3 媒体查询断点怎么设响应式不是加一段就算我加了媒体查询但还是乱是问得最多的问题之一。断点不是拍脑袋定的它是配合内容什么时候放不下来选的。课堂作业最常见的屏幕是三档手机竖屏一般 375414px、平板/窄笔记本7681024px、桌面宽屏1200px 以上。对应下面这套写法/* 默认样式手机竖屏优先 */ body { font-size: 16px; } /* 宽度 ≥ 768px平板和窄笔记本 */ media (min-width: 768px) { body { font-size: 18px; } } /* 宽度 ≥ 1200px桌面端 */ media (min-width: 1200px) { .container { max-width: 1140px; margin: 0 auto; } } /* 细节兜底窄屏下导航竖排 */ media (max-width: 767px) { .nav-list { flex-direction: column; gap: 12px; } }用min-width写移动端优先的好处是默认样式服务最小屏后续媒体查询只做增量覆盖。768px 这个断点的来历是 iPad 竖屏宽度超过它通常按平板布局走1200px 对应常见桌面内容的舒适宽度。如果只想在作业里体现我会响应式一组 768、一组 1200 就够断点多加反而容易顾此失彼。最后一段max-width: 767px是配套的收尾把导航从横排改成竖排避免小屏上菜单挤成一团。还有一个全局兜底别漏img { max-width: 100%; height: auto; }。这句不写在哪个媒体查询里而是直接放在全局样式否则图片在窄屏下会把页面撑出横向滚动条老师拖窗口时会立刻发现。4. 静态网页的交互与可运行性JavaScript 加分项和代码完整的底线4.1 三个低成本交互导航高亮、返回顶部、图片缩放静态网页设计作业里的 JavaScript 不需要复杂把当前页面在导航里高亮页面滚长后一键回顶作品图片点击放大这三个做完交互分基本稳定。下面是一份可以直接放进js/main.js的示例代码// 根据当前文件名高亮对应导航项 const currentPage location.pathname.split(/).pop() || index.html; document.querySelectorAll(.nav-list a).forEach((link) { if (link.getAttribute(href) currentPage) { link.classList.add(active); } }); // 返回顶部滚动超过 300px 后显示按钮 const backTop document.getElementById(backTop); if (backTop) { window.addEventListener(scroll, () { backTop.style.display window.scrollY 300 ? block : none; }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); } // 点击作品图片放大到新标签页查看 document.querySelectorAll(.card-grid img).forEach((img) { img.addEventListener(click, () { window.open(img.src, _blank); }); });location.pathname是当前页面的路径用split(/).pop()取出最后一段文件名比如gallery.html再和每个导航链接的href比对命中的就加上active类。这段代码不依赖某个页面写死以后新增页面也不需要改 JS。返回顶部的scrollY 300是显示阈值页面没滚起来时不显示按钮避免一打开就浮着一个多余的圆钮。图片放大用window.open新开标签页不需要引入任何弹窗库对期末作业完全够用想做成页面内放大效果那属于额外加分项不是必需的。4.2 表单校验与提示评分表里最容易拿分的隐藏项联系页放表单是静态网页设计的经典内容但很多作业做完就放那不校验、不提示、提交后整个页面刷新。下面这份代码能让表单在提交前做必填和格式检查并逐条显示中文提示提交后页面不会刷新已填写的内容也不会丢失。form idcontactForm novalidate label forname姓名/label input typetext idname required label foremail邮箱/label input typeemail idemail required button typesubmit提交/button p idformMsg classmsg/p /form对应的 JavaScript 放在js/main.js末尾只处理这一个表单的提交事件const form document.getElementById(contactForm); const msg document.getElementById(formMsg); form.addEventListener(submit, (e) { e.preventDefault(); const name document.getElementById(name).value.trim(); const email document.getElementById(email).value.trim(); if (name.length 2) { msg.textContent 姓名至少需要 2 个字符; msg.style.color #c0392b; return; } if (!/^[^\s][^\s]\.[^\s]$/.test(email)) { msg.textContent 请输入正确的邮箱地址; msg.style.color #c0392b; return; } msg.textContent 提交成功示例代码不会真正发送数据; msg.style.color #27ae60; });novalidate的作用是关掉浏览器自带的英文气泡提示让校验逻辑完全由自己的代码控制。e.preventDefault()阻止表单默认的提交刷新行为这是校验能正常执行的前提。邮箱正则^[^\s][^\s]\.[^\s]$要求 前后都有内容且包含点号对作业足够用不需要引入验证框架。全部通过后显示的提交成功文案要写清楚不会真正发送数据避免老师误以为你在没有后端的页面里造假数据交互。提示期末作业里的表单不需要真的把数据发到服务器。做到提交前校验 明确中文提示 页面不刷新这三件事就已经超过大多数同学的实现完整性。4.3 脚本加载顺序与 defer为什么粘贴的 JS 经常失效作业里最常见的一个现象是把网上的 JS 示例粘到/body前第一遍打开好用换台电脑就报Cannot read properties of null。这通常不是代码本身的问题而是脚本执行时 DOM 还没解析完。最稳的引入方式是给script加defer并放在head里script srcjs/main.js defer/scriptdefer让浏览器在 HTML 全部解析完成后再执行脚本但下载过程不阻塞渲染。这样document.querySelector一定能找到页面里已经存在的元素前面导航高亮、返回顶部这些依赖 DOM 的代码也就不会报错。区别在于不加defer时脚本立即执行如果脚本放在head里就需要再包一层DOMContentLoaded监听才能安全操作 DOM多包一层就多一种写错的可能。另一个顺序问题常出现在复制模板代码时如果页面引入了外部库比如字体库、图标库的 CDN 脚本那么 CDN 那行必须排在自己的main.js之前。浏览器按顺序执行脚本先引用的先加载main.js里如果调用了库里的变量加载顺序反了就会报XXX is not defined。期末作业虽然一般只有项目内部的main.js但很多同学会顺手复制网上的组件代码意识到这个顺序约束排错会快很多。5. 静态网页作业交付前的自检清单与提交技巧先做一次真实环境验证。双击打开index.html用的是file://协议它和真实站点跑在http://下的行为有差异建议用本地静态服务器验证这一步能提前暴露大部分路径和脚本问题# 在工程根目录启动一个静态文件服务器默认端口 8080 cd web_project python -m http.server 8080浏览器访问http://localhost:8080后逐个页面点一遍导航重点看控制台有没有红色报错。Failed to load resource: 404说明图片或 CSS 路径写错Uncaught TypeError: Cannot read properties of null说明 JS 在 DOM 未就绪时执行。把控制台调成无报错状态再往下走。提交前按这个顺序过一遍每个导航链接都实际点一次确认没有指向不存在页面的死链窗口从手机宽度拖到桌面宽度确认没有横向滚动条Chrome 和 Edge 各打开一次这两个内核是期末评审最常见的环境不需要做全浏览器兼容检查images目录确认页面引用的每张图都在文件夹里重复命名的图片清理掉。压缩成 zip 时命名为学号-姓名-静态网页设计作业老师解压后按 README 就能运行。README 里写三行即可运行环境、启动方式直接打开 index.html 或 python 服务、页面结构说明。如果能把首页截图贴进 README 开头批量评审时老师不用打开工程就先知道你的作业长什么样这一步非常加分。本文还有配套的精品资源点击获取 静态网页设计期末作业高分攻略：从文件结构到交互自检
简介这是一份面向大学生静态网页设计期末作业、毕业设计及课程设计的高分参考模板适合需要快速完成完整网页作品、又希望拿到高分的新手开发者。压缩包为zip格式共31个文件包含5个HTML页面、1个CSS样式表、2个JS交互脚本、21张JPG图片及1份README说明文档总大小约30.27MB。其中HTML构建页面结构CSS统一整体风格JS实现日历与表单校验等交互效果图片则作为页面视觉素材。目前已有514人学习/下载可见其贴合多数高校静态网页课程要求。资源包含主页、漫画分享、照片墙、留言板和关于我等模块覆盖图文排版、导航链接、相册展示、表单验证等常见考点代码逐段注释目录结构清晰下载后按README简单部署即可运行既可直接用于提交也可作为高分范例参考学习方便二次修改与个性化定制。1. 静态网页设计期末作业先把完整和99分拆开看很多同学拿到期末的静态网页设计题目时第一反应是上网找模板或者往页面里塞一堆用不上的特效插件结果交上去的作业要么在老师电脑上图片乱飞要么 CSS 文件缺了一个导致整页错位。做这门课的作业目标不是看起来炫而是代码完整、下载即用。99 分和 90 分的差距通常不在技术难度而在页面是否处处可点、文件是否干净、刷新是否稳定。下面按一份高分的静态网页设计期末作业该有的顺序从选题、HTML 骨架、CSS 布局、JavaScript 交互一直讲到交作业前的自检清单中间给出可以直接照改的代码。写之前把思路理清后面每个页面都是顺手的活。2. 静态网页的题材选择与文件结构99分的第一步是目录不乱2.1 先选题页数、内容与评分点的对应关系静态网页设计作业最常见的失败不是代码写错而是题材没选好。期末评分通常看结构是否完整、样式是否统一、交互是否可用、代码是否规范并不看页面里的图片有多花哨。所以选题要优先考虑内容能不能撑起 48 个页面个人作品集、地方美食介绍、校园风景展示、读书笔记、旅游攻略都是容易凑满素材的类型。题材类型大致页数可以展示的技术点个人作品集46网格布局、页面跳转、图片 hover 效果地方美食介绍58图文混排、卡片样式、导航锚点校园风景展示46大图 banner、相册网格、懒加载图片读书笔记57列表样式、引用块、章节锚点跳转选完题材后还要确定页面职责我一般会把页面分成内容页和功能页两类。内容页负责展示素材比如作品、风景图、美食介绍用来体现布局和排版能力功能页就是关于我和联系我们用来放表格、表单和文字说明。两类页面加起来够 5 个以上结构上就显得完整不至于让老师觉得这只是一个单页练习。2.2 文件目录这样组织下载即用的关键是相对路径下载即用这四个字本质上是相对路径写对了。把整个工程文件夹压缩发出去别人解压后双击打开就能看到完整效果靠的不是打包技术而是页面里所有引用都指向自己文件夹内部的相对地址。下面是用 tree 命令看到的常见工程结构web_project/ ├── index.html # 首页 ├── about.html # 关于页 ├── gallery.html # 作品/图库页 ├── contact.html # 联系页含表单 ├── css/ │ └── style.css # 全站共用样式 ├── js/ │ └── main.js # 全站共用脚本 ├── images/ # 页面用到的所有图片 │ ├── hero.jpg │ └── pic-01.png └── README.txt # 给评审看的说明常见错误是图片路径写成D:/web_project/images/hero.jpg这种绝对路径或者写成../images/hero.jpg却想当然地多退了一层目录。文件夹挪位置之后这两种写法都会变成破图。正确做法是CSS 里用url(../images/hero.jpg)HTML 里用images/hero.jpg路径基准始终是当前文件所在位置而不是我电脑上的位置。2.3 HTML 骨架里的加分细节DOCTYPE、meta 与语义化标签一份能拿高分的静态页 HTML开头几行就能看出基本功。下面这个骨架可以直接用作所有页面的模板主要包含 head 里的元信息、body 里的语义化结构以及底部版权区每一部分都有对应的打分点。实际使用时只需要替换 title、导航菜单和 main 里的内容改动量很小。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人作品集网站展示UI作品与摄影练习 title我的作品集 - 首页/title link relstylesheet hrefcss/style.css /head body header nav ul classnav-list lia hrefindex.html classactive首页/a/li lia hrefgallery.html作品/a/li lia hrefabout.html关于/a/li lia hrefcontact.html联系/a/li /ul /nav /header main h1欢迎来到我的作品集/h1 p这里展示我在课程期间完成的界面设计与摄影作品。/p /main footer p© 2024 课程期末作业/p /footer /body /html!DOCTYPE html让浏览器以标准模式渲染避免兼容模式的布局偏差很多为什么我的页面和同学的不一样的问题根源就在少了这一行。viewportmeta 控制移动端预览时的缩放没有它手机打开页面会横向缩小到看不清。description对显示效果没直接影响但它是代码规范性的体现评审看源码时这里有内容说明做作业的人不只是在应付。标签层面用header、nav、main、footer替代满屏div页面在没有 CSS 时也能按区块读懂。图片都写alt属性既是无障碍要求也避免图片加载失败时显示破图。每个页面只保留一个h1下面按h2、h3逐级展开这是评分里最常见的规范性扣分点写多写混都很亏。提示页面标题title要和导航里的名称保持一致比如首页的 title 是我的作品集 - 首页而不是统一都叫我的作品集。老师开多个标签页时标签上能分清每个页面体验会好很多。3. 把静态网页做得像设计过CSS 的三个必拿分模块3.1 用 CSS 变量定基调避免五颜六色作业分数上不去最常见的原因不是排版难而是颜色太多。拿高分的做法通常是给全站定两三个主色、一个强调色统一使用。CSS 自定义属性变量能把这种约束写进代码里:root { --primary: #2c3e50; --accent: #e67e22; --bg: #f8f9fa; --text: #333; --radius: 10px; } body { background: var(--bg); color: var(--text); font-family: PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; margin: 0; } a { color: var(--accent); text-decoration: none; } .nav-list a.active, .nav-list a:hover { color: var(--primary); border-bottom: 2px solid var(--accent); }变量统一写在:root里后续每个页面直接引用。想换主题色时只改:root一处全站同步更新对比每页单独写颜色的作业可维护性一眼可见。--radius保证所有卡片、按钮的圆角一致避免同一页出现三种圆角。line-height: 1.7是正文阅读比较舒服的行高比默认的 1.2 更适合中文内容这是很多模板里没调、但实际很影响观感的参数。3.2 Flex 与 Grid 的选用边界什么时候用哪一个页面里最常见的两种布局需求一是一行导航横向排开二是作品卡片整齐对齐。一个用 Flexbox一个用 Grid这是期末作业里最稳妥的分工/* 导航Flex 负责一维排列和对齐 */ .nav-list { display: flex; gap: 24px; justify-content: center; align-items: center; list-style: none; } /* 作品网格Grid 负责二维行列布局 */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .card-grid img { width: 100%; height: auto; border-radius: var(--radius); transition: transform 0.2s ease; } .card-grid img:hover { transform: scale(1.03); }Flex 的gap: 24px直接控制项目间距不用再给每个li加 margin。justify-content: center管水平居中align-items: center管垂直居中两个一配合导航居中是最快的写法。Grid 的repeat(auto-fill, minmax(240px, 1fr))表示每列至少 240px容器够宽就多排几列不够就自动换行这段代码本身就实现了不同屏幕下网格自适应比写死grid-template-columns: 1fr 1fr 1fr更能拿分。布局场景首选方案判断依据导航、按钮组、单行对齐Flexbox一维排列对齐属性直观作品卡片、相册网格Grid二维行列自动填充列数单元素水平垂直居中Flexbox两句声明即可解决注意真要给 Grid 写死列数也优先用repeat(3, 1fr)配合minmax做兜底避免在窄屏上三列被压成一条缝。作业验收时老师通常会把窗口拖窄看一眼这一步做好能避免很多尴尬。3.3 媒体查询断点怎么设响应式不是加一段就算我加了媒体查询但还是乱是问得最多的问题之一。断点不是拍脑袋定的它是配合内容什么时候放不下来选的。课堂作业最常见的屏幕是三档手机竖屏一般 375414px、平板/窄笔记本7681024px、桌面宽屏1200px 以上。对应下面这套写法/* 默认样式手机竖屏优先 */ body { font-size: 16px; } /* 宽度 ≥ 768px平板和窄笔记本 */ media (min-width: 768px) { body { font-size: 18px; } } /* 宽度 ≥ 1200px桌面端 */ media (min-width: 1200px) { .container { max-width: 1140px; margin: 0 auto; } } /* 细节兜底窄屏下导航竖排 */ media (max-width: 767px) { .nav-list { flex-direction: column; gap: 12px; } }用min-width写移动端优先的好处是默认样式服务最小屏后续媒体查询只做增量覆盖。768px 这个断点的来历是 iPad 竖屏宽度超过它通常按平板布局走1200px 对应常见桌面内容的舒适宽度。如果只想在作业里体现我会响应式一组 768、一组 1200 就够断点多加反而容易顾此失彼。最后一段max-width: 767px是配套的收尾把导航从横排改成竖排避免小屏上菜单挤成一团。还有一个全局兜底别漏img { max-width: 100%; height: auto; }。这句不写在哪个媒体查询里而是直接放在全局样式否则图片在窄屏下会把页面撑出横向滚动条老师拖窗口时会立刻发现。4. 静态网页的交互与可运行性JavaScript 加分项和代码完整的底线4.1 三个低成本交互导航高亮、返回顶部、图片缩放静态网页设计作业里的 JavaScript 不需要复杂把当前页面在导航里高亮页面滚长后一键回顶作品图片点击放大这三个做完交互分基本稳定。下面是一份可以直接放进js/main.js的示例代码// 根据当前文件名高亮对应导航项 const currentPage location.pathname.split(/).pop() || index.html; document.querySelectorAll(.nav-list a).forEach((link) { if (link.getAttribute(href) currentPage) { link.classList.add(active); } }); // 返回顶部滚动超过 300px 后显示按钮 const backTop document.getElementById(backTop); if (backTop) { window.addEventListener(scroll, () { backTop.style.display window.scrollY 300 ? block : none; }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); } // 点击作品图片放大到新标签页查看 document.querySelectorAll(.card-grid img).forEach((img) { img.addEventListener(click, () { window.open(img.src, _blank); }); });location.pathname是当前页面的路径用split(/).pop()取出最后一段文件名比如gallery.html再和每个导航链接的href比对命中的就加上active类。这段代码不依赖某个页面写死以后新增页面也不需要改 JS。返回顶部的scrollY 300是显示阈值页面没滚起来时不显示按钮避免一打开就浮着一个多余的圆钮。图片放大用window.open新开标签页不需要引入任何弹窗库对期末作业完全够用想做成页面内放大效果那属于额外加分项不是必需的。4.2 表单校验与提示评分表里最容易拿分的隐藏项联系页放表单是静态网页设计的经典内容但很多作业做完就放那不校验、不提示、提交后整个页面刷新。下面这份代码能让表单在提交前做必填和格式检查并逐条显示中文提示提交后页面不会刷新已填写的内容也不会丢失。form idcontactForm novalidate label forname姓名/label input typetext idname required label foremail邮箱/label input typeemail idemail required button typesubmit提交/button p idformMsg classmsg/p /form对应的 JavaScript 放在js/main.js末尾只处理这一个表单的提交事件const form document.getElementById(contactForm); const msg document.getElementById(formMsg); form.addEventListener(submit, (e) { e.preventDefault(); const name document.getElementById(name).value.trim(); const email document.getElementById(email).value.trim(); if (name.length 2) { msg.textContent 姓名至少需要 2 个字符; msg.style.color #c0392b; return; } if (!/^[^\s][^\s]\.[^\s]$/.test(email)) { msg.textContent 请输入正确的邮箱地址; msg.style.color #c0392b; return; } msg.textContent 提交成功示例代码不会真正发送数据; msg.style.color #27ae60; });novalidate的作用是关掉浏览器自带的英文气泡提示让校验逻辑完全由自己的代码控制。e.preventDefault()阻止表单默认的提交刷新行为这是校验能正常执行的前提。邮箱正则^[^\s][^\s]\.[^\s]$要求 前后都有内容且包含点号对作业足够用不需要引入验证框架。全部通过后显示的提交成功文案要写清楚不会真正发送数据避免老师误以为你在没有后端的页面里造假数据交互。提示期末作业里的表单不需要真的把数据发到服务器。做到提交前校验 明确中文提示 页面不刷新这三件事就已经超过大多数同学的实现完整性。4.3 脚本加载顺序与 defer为什么粘贴的 JS 经常失效作业里最常见的一个现象是把网上的 JS 示例粘到/body前第一遍打开好用换台电脑就报Cannot read properties of null。这通常不是代码本身的问题而是脚本执行时 DOM 还没解析完。最稳的引入方式是给script加defer并放在head里script srcjs/main.js defer/scriptdefer让浏览器在 HTML 全部解析完成后再执行脚本但下载过程不阻塞渲染。这样document.querySelector一定能找到页面里已经存在的元素前面导航高亮、返回顶部这些依赖 DOM 的代码也就不会报错。区别在于不加defer时脚本立即执行如果脚本放在head里就需要再包一层DOMContentLoaded监听才能安全操作 DOM多包一层就多一种写错的可能。另一个顺序问题常出现在复制模板代码时如果页面引入了外部库比如字体库、图标库的 CDN 脚本那么 CDN 那行必须排在自己的main.js之前。浏览器按顺序执行脚本先引用的先加载main.js里如果调用了库里的变量加载顺序反了就会报XXX is not defined。期末作业虽然一般只有项目内部的main.js但很多同学会顺手复制网上的组件代码意识到这个顺序约束排错会快很多。5. 静态网页作业交付前的自检清单与提交技巧先做一次真实环境验证。双击打开index.html用的是file://协议它和真实站点跑在http://下的行为有差异建议用本地静态服务器验证这一步能提前暴露大部分路径和脚本问题# 在工程根目录启动一个静态文件服务器默认端口 8080 cd web_project python -m http.server 8080浏览器访问http://localhost:8080后逐个页面点一遍导航重点看控制台有没有红色报错。Failed to load resource: 404说明图片或 CSS 路径写错Uncaught TypeError: Cannot read properties of null说明 JS 在 DOM 未就绪时执行。把控制台调成无报错状态再往下走。提交前按这个顺序过一遍每个导航链接都实际点一次确认没有指向不存在页面的死链窗口从手机宽度拖到桌面宽度确认没有横向滚动条Chrome 和 Edge 各打开一次这两个内核是期末评审最常见的环境不需要做全浏览器兼容检查images目录确认页面引用的每张图都在文件夹里重复命名的图片清理掉。压缩成 zip 时命名为学号-姓名-静态网页设计作业老师解压后按 README 就能运行。README 里写三行即可运行环境、启动方式直接打开 index.html 或 python 服务、页面结构说明。如果能把首页截图贴进 README 开头批量评审时老师不用打开工程就先知道你的作业长什么样这一步非常加分。本文还有配套的精品资源点击获取