简介面向大学生Web前端课程与HTML5期末作业的“我的家乡”网页设计资源包共5个完整页面涵盖家乡简介、风景名胜、美食特色、在线调查等模块运用了HTML5语义化标签、CSS3样式布局以及JavaScript交互适合作为期末作业参考或前端入门练习。压缩包共57个文件包含5个HTML、6个CSS样式表以及46张jpg/webp/png图片资源整体大小15.4MB文件分类清晰、素材齐全下载后可直接运行预览。整个项目以家乡展示为主题从页面结构到视觉风格都适合作为课程设计模板。目前已有279人学习下载实用性得到初步验证。资源不仅提供了完整的页面代码与图片素材还体现了多页面网站的结构规划、导航设计、样式统一与内容组织方法对理解HTMLCSSJS的综合协作、提升网页制作能力很有帮助。1. 用 HTMLCSS 做「我的家乡」五页站先想清楚目录再动笔大学生期末作业里最常被问的一句话是“我的家乡”五个页面怎么做出项目感。验收老师打开第一眼往往不看配色而是看五页之间有没有统一导航、图片路径是否全通、CSS 有没有全粘在 HTML 里。所以在写第一个页面之前先把文件角色定死index.html 负责总览scenic.html 做景点food.html 做美食culture.html 做文化contact.html 做留言。旁边再放一个 style.css、一个 script.js 和 images 目录五个页面全部引用同一份 CSS、同一段导航这份作业才算从素材堆变成了网页设计。如果你还要答辩最好提前准备一句话“我是用 CSS 变量统一配色用 Grid 排的景点卡片”。2. 五个页面公共骨架与 style.css 的组织方式2.1 先拿表格把五个页面角色定死文件页面角色主要展示内容index.html首页城市大图、一句话介绍、四个子页入口scenic.html景点页3 到 4 个景点的图片卡片food.html美食页小吃图文清单culture.html文化页地域文化介绍图文搭配contact.html留言页表单留一段给访客填建议的地方这样划分一半是给老师看的期末答辩会逐页打开角色清晰的网站不需要多解释就能看明白。另一半是给代码维护看的五个页面标题不同、内容不同但头尾结构一致后面写样式和改导航都省事。以泉州为例首页放清源山和东西塔的大图景点页列清源山、开元寺、西街美食页写面线糊、润饼、醋肉文化页写南音和提线木偶留言页放一个姓名加留言的简单表单。素材一落地整站骨架就立住了。这里提醒一句contact 页做成留言而不是“自我介绍”是因为表单是一整块独立 HTML 结构能天然拉开与列表页的视觉差异老师一眼就能看出五个页面不是 CtrlC 出来的。2.2 公共 head 与导航块五个页面都这一份做 Web 前端页面时我习惯先把公共骨架模板建好再复制到五个页面。每个 HTML 文件开头只需要这几行!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的家乡 - 首页/title link relstylesheet hrefstyle.css /head body nav classsite-nav a classbrand hrefindex.html我的家乡/a ul classnav-links lia hrefindex.html首页/a/li lia hrefscenic.html景点/a/li lia hreffood.html美食/a/li lia hrefculture.html文化/a/li lia hrefcontact.html留言/a/li /ul /nav这里有三点值得说明。第一langzh-CN别漏它影响浏览器的默认文本渲染和朗读。第二viewport是手机打开时不自动缩放的开关不写这一行期末演示用投影或手机浏览器打开时页面会显得很散。第三导航里必须用相对路径index.html、scenic.html这种形式不要用http://开头的绝对地址否则文件一拷贝就断链。五个页面共用这一份导航就是“网页制作成品”和“五张没关联的 HTML”之间最直观的区别。部署到任意目录都是同一套相对关系不需要改一行代码。2.3 style.css 三行式起手变量、重置、全局排版CSS 文件不建议一上来就写具体页面样式。我做多页作业时先把全局层写成三行模式变量、重置、正文排版。:root { --main-color: #2b6a4e; --bg-color: #f8f4ec; --text-color: #2d2a26; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.7; }.site-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; background: #fff; } .nav-links { display: flex; gap: 20px; list-style: none; } .nav-links a { text-decoration: none; color: var(--text-color); padding: 6px 14px; border-radius: 18px; } .nav-links a:hover, .nav-links a.active { background: var(--main-color); color: #fff; }CSS 变量是 html5css3js 这几年最简单的提分点。把主体色放在:root里定义一次后面页面要统一配色时直接写var(--main-color)。答辩时如果老师问“换配色怎么办”当场改一行变量五个页面颜色全部变化这比硬编码#2b6a4e到处复制更有说服力。box-sizing: border-box是另一个容易被忽略的细节它让元素设置的宽度包含内边距和边框写卡片布局时不会出现实际宽度比预期大一圈的问题。2.4 当前页面高亮用 JS 判断字符串包含导航里“当前在哪一页”是高频交互在网页设计美化里常见做法有两种。一种是在每个 HTML 里手动给当前项写classactive代码量最小但容易漏改另一种是用 JS 在页面加载时自动判断规则统一我也更推荐后者。// 取当前文件名的后半段例如 index.html、scenic.html const currentPage location.pathname.split(/).pop() || index.html; document.querySelectorAll(.nav-links a).forEach(function (link) { // 用字符串包含判断href 与文件名一致就标记高亮 if (link.getAttribute(href).includes(currentPage)) { link.classList.add(active); } });这段 JS 用includes而不是全等比较是为了兼容偶尔出现的./index.html或index.html#top这类写法。split(/)先按斜杠切分pop()取到最后一个元素就是当前文件名|| index.html做兜底防止某些环境下pathname为空。按 htmlcss 期末作业的评分习惯这一段同时踩中了“js 引入”“js 判断字符串是否包含”“导航高亮”三个考察点比在每个页面手写 active 更经得起追问。提示提交作业前不要用 fetch 去读 data.json。本地双击 HTML 时走的是file://协议fetch 在多数浏览器下会被拦页面内容直接写进 HTML 更稳答辩教室不一定有网络。3. 首页和景点页的分工banner 区与 CSS Grid 卡片3.1 首页 hero 区用 flex 垂直居中撑满首屏首页的信息层级是一句话标题、一句副标题、一个进入景点页的按钮。HTML 和 CSS 的写法如下section classhero h1泉州半城烟火半城仙/h1 p海上丝绸之路的起点留得下来的是闽南烟火气。/p a classbtn hrefscenic.html去看景点/a /section.hero { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(images/hero.jpg) center / cover no-repeat; gap: 14px; } .hero .btn { margin-top: 10px; padding: 10px 28px; border-radius: 30px; background: #fff; color: var(--main-color); text-decoration: none; font-weight: bold; }min-height: 70vh比height: 500px更稳妥因为屏幕矮时页面不会产生多余的滚动条。flex-direction: column配合justify-content: center和align-items: center不管标题和文字多少行始终垂直、水平居中。背景上的线性渐变蒙层不是纯装饰它的作用是压暗图片保证白色文字在亮色照片上仍然可读。背景路径写images/hero.jpg与 HTML 在同一层目录比放进深层文件夹再写一堆../更不容易断。3.2 景点页用 CSS Grid 做自适应卡片列表景点页最耐看的做法是卡片列表一行放不下自动换行。CSS 里一个repeat(auto-fill, minmax(280px, 1fr))就同时完成了三栏、两栏、单栏的切换这是大学生网页制作作业里性价比最高的布局写法。section classsection-card h2值得去的三个地方/h2 div classcard-list a classcard href#qingyuan img srcimages/qingyuan.jpg alt清源山 h3清源山/h3 p看老君岩也要在山上等一场日落。/p /a a classcard href#kaiyuan img srcimages/kaiyuan.jpg alt开元寺 h3开元寺/h3 p东西塔坐落市中心走两步就能到西街。/p /a a classcard href#xijie img srcimages/xijie.jpg alt西街 h3西街/h3 p老房子、旧店铺和满街的小吃香味。/p /a /div /section.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .card { display: block; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card img { width: 100%; height: 180px; object-fit: cover; } .card h3 { margin: 12px 16px 4px; } .card p { margin: 0 16px 16px; font-size: 14px; color: #666; }minmax(280px, 1fr)的意思是每列最少 280 像素剩余空间均分。auto-fill让浏览器根据容器宽度自动算列数屏幕越宽列数越多手机宽度不足时自动变一列。object-fit: cover专门处理尺寸不统一的图片统一裁成高度 180px不会把卡片撑歪。常见误用是把卡片放进 flex 容器再手动加百分比宽度换屏幕尺寸就容易溢出Grid 的1fr不需要手算百分比。控制维度flex 手写宽度grid auto-fill屏幕宽度变化时要配合媒体查询介入自动换列手机端容易溢出自动单列答辩现场说明讲起来绕一句话讲完三个卡片CSS 里没有写一行媒体查询页面在手机上自动变单列。如果课程要求“布局用了 flex 和 grid”这一页就是最好的展示位置。至于gap: 24px它替代了在每个卡片上写 margin从根本上避免最后一列多出外边距的问题。3.3 图片资源统一放入 images 目录学校机房拷贝作业经常出现图片穿帮有的写在img srcC:\Users\...直接写死了本地磁盘路径有的挂了外链图片U 盘拷走后外链过期图全裂。相对路径images/xxx.jpg是唯一保证拷到别的电脑上仍能显示的写法。有两点建议。第一图片体积控制在每张 200 KB 以内五个页面总共十张图也才两兆答辩复制速度快。第二横图宽度别超过 1600 像素卡片图 800 像素足够超过两兆的照片先压缩再放进作业包。这样才能避免网页打开时图片加载半天。4. 三个交互细节鼠标移入、input 居中、一键返回顶部4.1 卡片鼠标移入事件优先用 CSS网页设计美化里最常见的交互是“鼠标移入卡片浮起来”。不少同学会写一堆mouseenter其实 CSS 一个伪类加一个过渡就够了。伪类不需要手动移除监听渲染性能也比 JS 好.card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }用translateY(-6px)让卡片上浮不要改宽度或高度否则会触发周围文字回流。box-shadow加在 hover 状态下视觉上形成“卡片离桌面更高”的效果。0.25 秒是鼠标悬停效果最舒服的时长太快显得生硬太慢会有明显拖沓感。如果整站多处都有卡片直接共用.card类就行不需要为每个页面复制规则。4.2 留言页的 input 居中用 flex 比 margin 好写contact 页面里表单是硬性需求。有人一直在搜“css中怎么把input居中”常见反例是给input设margin: 0 auto结果发现根本没居中——普通块级输入框的宽度默认随父容器伸展margin: auto缺少可以计算的参考宽度。正确的入门写法是用一个表单容器统一控制form classcontact-form label formsgName你的称呼/label input typetext idmsgName namename placeholder请输入称呼 required label formsgText想说的话/label textarea idmsgText rows4 placeholder给家乡留一句建议/textarea button typesubmit提交留言/button /form.contact-form { max-width: 480px; margin: 40px auto; padding: 24px; display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 12px; } .contact-form input, .contact-form textarea { padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--main-color); outline: 2px solid rgba(43, 106, 78, 0.2); } .contact-form button { padding: 10px 0; border: none; border-radius: 30px; background: var(--main-color); color: #fff; font-size: 15px; cursor: pointer; }容器用display: flex加flex-direction: column后子元素纵向排列并自动占满容器宽度不再需要逐条让 input 居中。gap: 10px代替了对每个 label 单独写 margin间距统一。焦点边框用主色调的浅色变体是现代网页的常见交互反馈也算一个简单提分项。这个表单没有写action单看前端作业静态展示足够要真收集留言需要另接后端不是本页重点。4.3 返回顶部的算法滚动监听加固定定位页面内容一长底部就需要返回顶部按钮。“html一键返回顶部算法”在本地静态页面里一样好用跟服务器语言无关。做法是固定定位按钮、监听滚动距离、上浮按钮#go-top { position: fixed; right: 24px; bottom: 32px; display: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--main-color); color: #fff; font-size: 18px; cursor: pointer; }button idgo-top aria-label返回顶部↑/buttonvar goTopBtn document.getElementById(go-top); window.addEventListener(scroll, function () { if (window.scrollY 300) goTopBtn.style.display block; else goTopBtn.style.display none; }); goTopBtn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollY返回当前滚动的像素距离超过 300 才显示按钮避免页面短的时候出现一个永远用不上的圆形图标。scrollTo用来控制滚动的目标坐标behavior: smooth让滚动过程平滑不用自己写定时器。这段脚本统一放到script.js在五个页面的/body前引入。需要说明的是scrollTo的平滑滚动在特别老的浏览器里会退回“瞬间跳转”课程作业一般不考虑这种降级。5. 交作业前用 20 分钟做一遍五页自检5.1 五页导航互通测试双击 index.html 开始逐个点击五个导航项每进入一个子页后再返回首页确认所有相对链接都能走通。打开浏览器开发者工具切到 Console 面板看有没有红色报错。这里不需要再点开别的东西VSCode 写前端时可以直接按 F12在 Elements 面板里左侧看 HTML 结构右侧看对应的 CSS 规则哪个样式没生效一眼就能看到。5.2 图片路径和大小检查把整个作业文件夹复制到另一个盘符再从复制后的文件夹里打开一次。图片正常显示说明用的是相对路径如果裂图优先查img标签里的src把C:\Users\...这类写法换成images/文件名。同时打开任务管理器或者文件属性看看整个文件夹体积单张图片超过 500 KB 就压缩一遍交给老师之前确认所有图片都能离线正常显示。5.3 检查中文乱码五个 HTML 文件统一用 UTF-8 保存meta charsetUTF-8放在head前三行内。Windows 记事本偶尔会把文件存成 GBK所以在 VSCode 里保存时注意右下角编码显示是 UTF-8。如果打开后出现“鍦版枃”这类乱码把文件另存为 UTF-8 再覆盖原文件就行。5.4 JS 只在必要处出现答辩前把无效代码删干净。多余的alert()调试语句、写死弹窗、没有绑定事件的按钮都不要留。如果老师现场问“JS 写在哪儿”你能直接说出script.js指出其中两件事导航高亮用了字符串包含判断返回顶部用了window.scrollY加scrollTo。能把这两条讲清楚远超“我复制了别人一段特效”的效果。5.5 断网再测一遍最后关掉网络重新打开整站。这个动作能暴露所有依赖外链的问题。如果你引用了在线字体、第三方图标库断网后图标全空答辩现场就会翻车。因此页面元素尽量用 CSS 绘制完成图标可以替换为字符或本地图片配色依赖var(--main-color)附加效果用现有的 hover 过渡和滚动监听完成这就够了。本文还有配套的精品资源点击获取 
长河君 · 2026/9/14 15:24:28 · 阅读 1.2k HTML+CSS+JS实战：从零构建“我的家乡”五页响应式网站
简介面向大学生Web前端课程与HTML5期末作业的“我的家乡”网页设计资源包共5个完整页面涵盖家乡简介、风景名胜、美食特色、在线调查等模块运用了HTML5语义化标签、CSS3样式布局以及JavaScript交互适合作为期末作业参考或前端入门练习。压缩包共57个文件包含5个HTML、6个CSS样式表以及46张jpg/webp/png图片资源整体大小15.4MB文件分类清晰、素材齐全下载后可直接运行预览。整个项目以家乡展示为主题从页面结构到视觉风格都适合作为课程设计模板。目前已有279人学习下载实用性得到初步验证。资源不仅提供了完整的页面代码与图片素材还体现了多页面网站的结构规划、导航设计、样式统一与内容组织方法对理解HTMLCSSJS的综合协作、提升网页制作能力很有帮助。1. 用 HTMLCSS 做「我的家乡」五页站先想清楚目录再动笔大学生期末作业里最常被问的一句话是“我的家乡”五个页面怎么做出项目感。验收老师打开第一眼往往不看配色而是看五页之间有没有统一导航、图片路径是否全通、CSS 有没有全粘在 HTML 里。所以在写第一个页面之前先把文件角色定死index.html 负责总览scenic.html 做景点food.html 做美食culture.html 做文化contact.html 做留言。旁边再放一个 style.css、一个 script.js 和 images 目录五个页面全部引用同一份 CSS、同一段导航这份作业才算从素材堆变成了网页设计。如果你还要答辩最好提前准备一句话“我是用 CSS 变量统一配色用 Grid 排的景点卡片”。2. 五个页面公共骨架与 style.css 的组织方式2.1 先拿表格把五个页面角色定死文件页面角色主要展示内容index.html首页城市大图、一句话介绍、四个子页入口scenic.html景点页3 到 4 个景点的图片卡片food.html美食页小吃图文清单culture.html文化页地域文化介绍图文搭配contact.html留言页表单留一段给访客填建议的地方这样划分一半是给老师看的期末答辩会逐页打开角色清晰的网站不需要多解释就能看明白。另一半是给代码维护看的五个页面标题不同、内容不同但头尾结构一致后面写样式和改导航都省事。以泉州为例首页放清源山和东西塔的大图景点页列清源山、开元寺、西街美食页写面线糊、润饼、醋肉文化页写南音和提线木偶留言页放一个姓名加留言的简单表单。素材一落地整站骨架就立住了。这里提醒一句contact 页做成留言而不是“自我介绍”是因为表单是一整块独立 HTML 结构能天然拉开与列表页的视觉差异老师一眼就能看出五个页面不是 CtrlC 出来的。2.2 公共 head 与导航块五个页面都这一份做 Web 前端页面时我习惯先把公共骨架模板建好再复制到五个页面。每个 HTML 文件开头只需要这几行!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的家乡 - 首页/title link relstylesheet hrefstyle.css /head body nav classsite-nav a classbrand hrefindex.html我的家乡/a ul classnav-links lia hrefindex.html首页/a/li lia hrefscenic.html景点/a/li lia hreffood.html美食/a/li lia hrefculture.html文化/a/li lia hrefcontact.html留言/a/li /ul /nav这里有三点值得说明。第一langzh-CN别漏它影响浏览器的默认文本渲染和朗读。第二viewport是手机打开时不自动缩放的开关不写这一行期末演示用投影或手机浏览器打开时页面会显得很散。第三导航里必须用相对路径index.html、scenic.html这种形式不要用http://开头的绝对地址否则文件一拷贝就断链。五个页面共用这一份导航就是“网页制作成品”和“五张没关联的 HTML”之间最直观的区别。部署到任意目录都是同一套相对关系不需要改一行代码。2.3 style.css 三行式起手变量、重置、全局排版CSS 文件不建议一上来就写具体页面样式。我做多页作业时先把全局层写成三行模式变量、重置、正文排版。:root { --main-color: #2b6a4e; --bg-color: #f8f4ec; --text-color: #2d2a26; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.7; }.site-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; background: #fff; } .nav-links { display: flex; gap: 20px; list-style: none; } .nav-links a { text-decoration: none; color: var(--text-color); padding: 6px 14px; border-radius: 18px; } .nav-links a:hover, .nav-links a.active { background: var(--main-color); color: #fff; }CSS 变量是 html5css3js 这几年最简单的提分点。把主体色放在:root里定义一次后面页面要统一配色时直接写var(--main-color)。答辩时如果老师问“换配色怎么办”当场改一行变量五个页面颜色全部变化这比硬编码#2b6a4e到处复制更有说服力。box-sizing: border-box是另一个容易被忽略的细节它让元素设置的宽度包含内边距和边框写卡片布局时不会出现实际宽度比预期大一圈的问题。2.4 当前页面高亮用 JS 判断字符串包含导航里“当前在哪一页”是高频交互在网页设计美化里常见做法有两种。一种是在每个 HTML 里手动给当前项写classactive代码量最小但容易漏改另一种是用 JS 在页面加载时自动判断规则统一我也更推荐后者。// 取当前文件名的后半段例如 index.html、scenic.html const currentPage location.pathname.split(/).pop() || index.html; document.querySelectorAll(.nav-links a).forEach(function (link) { // 用字符串包含判断href 与文件名一致就标记高亮 if (link.getAttribute(href).includes(currentPage)) { link.classList.add(active); } });这段 JS 用includes而不是全等比较是为了兼容偶尔出现的./index.html或index.html#top这类写法。split(/)先按斜杠切分pop()取到最后一个元素就是当前文件名|| index.html做兜底防止某些环境下pathname为空。按 htmlcss 期末作业的评分习惯这一段同时踩中了“js 引入”“js 判断字符串是否包含”“导航高亮”三个考察点比在每个页面手写 active 更经得起追问。提示提交作业前不要用 fetch 去读 data.json。本地双击 HTML 时走的是file://协议fetch 在多数浏览器下会被拦页面内容直接写进 HTML 更稳答辩教室不一定有网络。3. 首页和景点页的分工banner 区与 CSS Grid 卡片3.1 首页 hero 区用 flex 垂直居中撑满首屏首页的信息层级是一句话标题、一句副标题、一个进入景点页的按钮。HTML 和 CSS 的写法如下section classhero h1泉州半城烟火半城仙/h1 p海上丝绸之路的起点留得下来的是闽南烟火气。/p a classbtn hrefscenic.html去看景点/a /section.hero { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(images/hero.jpg) center / cover no-repeat; gap: 14px; } .hero .btn { margin-top: 10px; padding: 10px 28px; border-radius: 30px; background: #fff; color: var(--main-color); text-decoration: none; font-weight: bold; }min-height: 70vh比height: 500px更稳妥因为屏幕矮时页面不会产生多余的滚动条。flex-direction: column配合justify-content: center和align-items: center不管标题和文字多少行始终垂直、水平居中。背景上的线性渐变蒙层不是纯装饰它的作用是压暗图片保证白色文字在亮色照片上仍然可读。背景路径写images/hero.jpg与 HTML 在同一层目录比放进深层文件夹再写一堆../更不容易断。3.2 景点页用 CSS Grid 做自适应卡片列表景点页最耐看的做法是卡片列表一行放不下自动换行。CSS 里一个repeat(auto-fill, minmax(280px, 1fr))就同时完成了三栏、两栏、单栏的切换这是大学生网页制作作业里性价比最高的布局写法。section classsection-card h2值得去的三个地方/h2 div classcard-list a classcard href#qingyuan img srcimages/qingyuan.jpg alt清源山 h3清源山/h3 p看老君岩也要在山上等一场日落。/p /a a classcard href#kaiyuan img srcimages/kaiyuan.jpg alt开元寺 h3开元寺/h3 p东西塔坐落市中心走两步就能到西街。/p /a a classcard href#xijie img srcimages/xijie.jpg alt西街 h3西街/h3 p老房子、旧店铺和满街的小吃香味。/p /a /div /section.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .card { display: block; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card img { width: 100%; height: 180px; object-fit: cover; } .card h3 { margin: 12px 16px 4px; } .card p { margin: 0 16px 16px; font-size: 14px; color: #666; }minmax(280px, 1fr)的意思是每列最少 280 像素剩余空间均分。auto-fill让浏览器根据容器宽度自动算列数屏幕越宽列数越多手机宽度不足时自动变一列。object-fit: cover专门处理尺寸不统一的图片统一裁成高度 180px不会把卡片撑歪。常见误用是把卡片放进 flex 容器再手动加百分比宽度换屏幕尺寸就容易溢出Grid 的1fr不需要手算百分比。控制维度flex 手写宽度grid auto-fill屏幕宽度变化时要配合媒体查询介入自动换列手机端容易溢出自动单列答辩现场说明讲起来绕一句话讲完三个卡片CSS 里没有写一行媒体查询页面在手机上自动变单列。如果课程要求“布局用了 flex 和 grid”这一页就是最好的展示位置。至于gap: 24px它替代了在每个卡片上写 margin从根本上避免最后一列多出外边距的问题。3.3 图片资源统一放入 images 目录学校机房拷贝作业经常出现图片穿帮有的写在img srcC:\Users\...直接写死了本地磁盘路径有的挂了外链图片U 盘拷走后外链过期图全裂。相对路径images/xxx.jpg是唯一保证拷到别的电脑上仍能显示的写法。有两点建议。第一图片体积控制在每张 200 KB 以内五个页面总共十张图也才两兆答辩复制速度快。第二横图宽度别超过 1600 像素卡片图 800 像素足够超过两兆的照片先压缩再放进作业包。这样才能避免网页打开时图片加载半天。4. 三个交互细节鼠标移入、input 居中、一键返回顶部4.1 卡片鼠标移入事件优先用 CSS网页设计美化里最常见的交互是“鼠标移入卡片浮起来”。不少同学会写一堆mouseenter其实 CSS 一个伪类加一个过渡就够了。伪类不需要手动移除监听渲染性能也比 JS 好.card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }用translateY(-6px)让卡片上浮不要改宽度或高度否则会触发周围文字回流。box-shadow加在 hover 状态下视觉上形成“卡片离桌面更高”的效果。0.25 秒是鼠标悬停效果最舒服的时长太快显得生硬太慢会有明显拖沓感。如果整站多处都有卡片直接共用.card类就行不需要为每个页面复制规则。4.2 留言页的 input 居中用 flex 比 margin 好写contact 页面里表单是硬性需求。有人一直在搜“css中怎么把input居中”常见反例是给input设margin: 0 auto结果发现根本没居中——普通块级输入框的宽度默认随父容器伸展margin: auto缺少可以计算的参考宽度。正确的入门写法是用一个表单容器统一控制form classcontact-form label formsgName你的称呼/label input typetext idmsgName namename placeholder请输入称呼 required label formsgText想说的话/label textarea idmsgText rows4 placeholder给家乡留一句建议/textarea button typesubmit提交留言/button /form.contact-form { max-width: 480px; margin: 40px auto; padding: 24px; display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 12px; } .contact-form input, .contact-form textarea { padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--main-color); outline: 2px solid rgba(43, 106, 78, 0.2); } .contact-form button { padding: 10px 0; border: none; border-radius: 30px; background: var(--main-color); color: #fff; font-size: 15px; cursor: pointer; }容器用display: flex加flex-direction: column后子元素纵向排列并自动占满容器宽度不再需要逐条让 input 居中。gap: 10px代替了对每个 label 单独写 margin间距统一。焦点边框用主色调的浅色变体是现代网页的常见交互反馈也算一个简单提分项。这个表单没有写action单看前端作业静态展示足够要真收集留言需要另接后端不是本页重点。4.3 返回顶部的算法滚动监听加固定定位页面内容一长底部就需要返回顶部按钮。“html一键返回顶部算法”在本地静态页面里一样好用跟服务器语言无关。做法是固定定位按钮、监听滚动距离、上浮按钮#go-top { position: fixed; right: 24px; bottom: 32px; display: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--main-color); color: #fff; font-size: 18px; cursor: pointer; }button idgo-top aria-label返回顶部↑/buttonvar goTopBtn document.getElementById(go-top); window.addEventListener(scroll, function () { if (window.scrollY 300) goTopBtn.style.display block; else goTopBtn.style.display none; }); goTopBtn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollY返回当前滚动的像素距离超过 300 才显示按钮避免页面短的时候出现一个永远用不上的圆形图标。scrollTo用来控制滚动的目标坐标behavior: smooth让滚动过程平滑不用自己写定时器。这段脚本统一放到script.js在五个页面的/body前引入。需要说明的是scrollTo的平滑滚动在特别老的浏览器里会退回“瞬间跳转”课程作业一般不考虑这种降级。5. 交作业前用 20 分钟做一遍五页自检5.1 五页导航互通测试双击 index.html 开始逐个点击五个导航项每进入一个子页后再返回首页确认所有相对链接都能走通。打开浏览器开发者工具切到 Console 面板看有没有红色报错。这里不需要再点开别的东西VSCode 写前端时可以直接按 F12在 Elements 面板里左侧看 HTML 结构右侧看对应的 CSS 规则哪个样式没生效一眼就能看到。5.2 图片路径和大小检查把整个作业文件夹复制到另一个盘符再从复制后的文件夹里打开一次。图片正常显示说明用的是相对路径如果裂图优先查img标签里的src把C:\Users\...这类写法换成images/文件名。同时打开任务管理器或者文件属性看看整个文件夹体积单张图片超过 500 KB 就压缩一遍交给老师之前确认所有图片都能离线正常显示。5.3 检查中文乱码五个 HTML 文件统一用 UTF-8 保存meta charsetUTF-8放在head前三行内。Windows 记事本偶尔会把文件存成 GBK所以在 VSCode 里保存时注意右下角编码显示是 UTF-8。如果打开后出现“鍦版枃”这类乱码把文件另存为 UTF-8 再覆盖原文件就行。5.4 JS 只在必要处出现答辩前把无效代码删干净。多余的alert()调试语句、写死弹窗、没有绑定事件的按钮都不要留。如果老师现场问“JS 写在哪儿”你能直接说出script.js指出其中两件事导航高亮用了字符串包含判断返回顶部用了window.scrollY加scrollTo。能把这两条讲清楚远超“我复制了别人一段特效”的效果。5.5 断网再测一遍最后关掉网络重新打开整站。这个动作能暴露所有依赖外链的问题。如果你引用了在线字体、第三方图标库断网后图标全空答辩现场就会翻车。因此页面元素尽量用 CSS 绘制完成图标可以替换为字符或本地图片配色依赖var(--main-color)附加效果用现有的 hover 过渡和滚动监听完成这就够了。本文还有配套的精品资源点击获取