简介这是一份面向Web前端初学者与期末作业设计者的南昌地铁企业官网完整项目基于HTML5CSS3JavaScript实现包含20个页面涵盖首页、线路导览、运营信息、新闻公告等板块可整体作为大学生网页设计作业的参考成品也可拆分用于学习企业型站点的页面架构与交互实现。压缩包内共170个文件约54.42MB其中20个HTML页面配合13个CSS样式文件与15个JS脚本实现布局、动画及表单交互另有大量jpg/jpeg/png图片及svg图标、ttf字体等资源支撑视觉呈现目录组织清晰便于直接修改替换内容。目前已吸引210人学习下载适合需要快速搭建多页面企业官网或想了解完整前端开发流程的学习者。通过该资源可获得一套可直接运行的网站源码涵盖响应式导航、轮播图、下拉菜单、日期选择等常用组件并配有预览地址与说明文档有助于理解企业官网从设计到落地的完整过程。1. 先把“20 个页面”拆成信息架构再动手写 HTML“南昌地铁企业官网 20 个页面”这个作业题真正难的不是 HTML 标签也不是 CSS 会不会写而是“20”这个数字吓住了大多数人。一页一页从零敲敲到第 7 页就开始疲到第 12 页基本只想复制粘贴最后几页连标题都懒得改——这是期末作业最常见的翻车方式。换一个思路企业官网的信息架构有固定套路20 页拆成“首页 频道页 详情页”三层三层共用同一套页面骨架、同一份 CSS 变量、三四个 JS 组件。真正需要手写的只有每个页面主体那一小块。这一篇就按这个顺序讲先规划页面清单再定公共骨架然后统一样式和交互最后交作业前做一次路径与编码检查。2. 先按真实地铁官网的频道结构把 20 个页面清单列出来2.1 为什么说“首页 / 频道页 / 详情页”三层结构是作业的主心骨打开任何一个国内地铁公司的官网页面再多也能归进几个固定频道关于我们、乘车服务、新闻中心、人才招聘、联系互动。首页负责把最重要的入口聚合起来频道页负责一个栏目的索引详情页负责一条新闻、一个岗位、一条公告的具体内容。把这一层想清楚20 个页面就不是 20 份独立工作而是“三类模板”的工作量首页只需要 1 个结构最特殊单独设计频道页有 45 个共用一套“左侧子导航 右侧列表”的版式详情页有 10 个以上共用一套“面包屑 内容区域”的版式。所以规划阶段最忌讳一上来就打开编辑器。先把清单写出来用表格把每个页面的文件名、title、页面类型定死后面所有复制粘贴都对着这张表来标题写错、文件漏建的概率会大幅下降。2.2 一份可直接套用的 20 页清单下面这份清单是围绕“南昌地铁”场景整理的页面数量和类型都覆盖了期末作业常见的扣分点有首页、有栏目列表、有详情页、有表单页、有辅助页。序号页面类型文件名页面标题title 写法1首页index.html首页 - 南昌地铁官方网站2公司频道页about.html公司简介 - 南昌地铁3公司频道页culture.html企业文化 - 南昌地铁4公司频道页honor.html企业荣誉 - 南昌地铁5公司频道页org.html组织架构 - 南昌地铁6乘车频道页guide.html乘车指南 - 南昌地铁7乘车频道页ticket.html一卡通办理 - 南昌地铁8乘车频道页station.html车站信息 - 南昌地铁9乘车频道页schedule.html首末班车时间 - 南昌地铁10乘车频道页safety.html安全文明乘车 - 南昌地铁11新闻频道页news.html新闻中心 - 南昌地铁12新闻详情页news-schedule.html新闻详情1 号线运营时间调整公告13新闻详情页news-activity.html新闻详情地铁文化周活动回顾14新闻详情页news-recruit.html新闻详情2025 春季校园招聘启动15招聘频道页recruit.html人才招聘 - 南昌地铁16招聘详情页post-ui.html岗位详情Web 前端开发工程师17互动频道页feedback.html意见反馈 - 南昌地铁18互动频道页faq.html常见问题 - 南昌地铁19辅助页tour.html地铁周边游玩推荐20辅助页contact.html联系我们 - 南昌地铁注意一个容易翻车的细节位置 1214 的新闻详情页文件名不要写成 news1.html、news2.html而应该用语义化名字比如 news-schedule.html。这是 Web 前端课程里“URL 语义化”最容易被答辩老师单独提问的点提前做好能省去后面返工。2.3 详情页数量怎么分配最不容易被质疑有同学觉得 20 页很多于是把公司介绍拆成“总经理致辞”“发展历程”“资质证书”三个页面。这个思路没错但要警惕内容空洞——页面多了每页只有一段话答辩时老师随便点开一页问“这页的信息结构是什么”答不上来就很尴尬。我推荐的分配是新闻详情页做 3 个招聘详情页做 1 个把富余页数留给“车站信息”“地铁周边游玩”这类天然适合放图片、放表格的页面。图片多、内容条理清晰视觉上马上显得“像官网”比多写两个空壳文字页划算得多。提示清单定下来后先在根目录建一个 page-list.txt把文件名逐行写进去每完成一页就用编辑器标记完成。后面排查漏页、统计工作量都靠它。3. 用同一套 HTML 页面骨架复制出全部 20 个页面3.1 三段式结构公共头部、独立主体、公共底部不管是首页还是新闻详情页HTML 结构都能拆成三段header、main、footer。header 是 logo 和主导航footer 是版权信息和备案文字作业里可以写成“课程学习用途”这两段在 20 个页面里完全一致。打开一个频道页的骨架直接把 header 和 footer 复制到新文件里只改 main一个页面就完成了 70%。下面是我写这类多页面静态站的标准骨架你新建页面时可以直接复制这一段!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content南昌地铁官方网站提供乘车指南、新闻中心、人才招聘等信息 title公司简介 - 南昌地铁官方网站/title link relstylesheet hrefcss/base.css /head body !-- 公共头部20 个页面保持一致 -- header classsite-header div classcontainer header-inner a classlogo hrefindex.html img srcimages/logo.png alt南昌地铁 /a nav classmain-nav a hrefindex.html首页/a a hrefabout.html classactive关于我们/a a hrefguide.html乘车服务/a a hrefnews.html新闻中心/a a hrefrecruit.html人才招聘/a a hrefcontact.html联系我们/a /nav /div /header !-- 主体每个页面只改这一块 -- main classcontainer page-main !-- 频道页 / 详情页 / 首页各自的内容写在这里 -- /main !-- 公共底部20 个页面保持一致 -- footer classsite-footer div classcontainer footer-inner p南昌地铁官方网站 · 大学生 HTML5 期末作业/p p本网站仅用于 Web 前端课程学习展示/p /div /footer /body /html这段代码里有两个关键点需要说明。第一导航里的classactive是“当前页高亮”标记复制这个骨架到新页面时必须手动把 active 移到当前页对应的链接上。第二CSS 引用用的是css/base.css这是相对路径要求所有 HTML 文件都放在项目根目录css 文件夹和 HTML 文件平级否则这条路径会失效。3.2 目录结构固定为三层避免路径层层嵌套出错很多作业翻车不是页面写错了而是文件目录太深。有人把每个频道单独建一个文件夹比如news/news-1.html然后 CSS 路径就得写成../css/base.css图片路径写成../images/xxx.png。路径一旦变长漏写一个../就是一片红叉。20 个页面不建子目录全部平铺在根目录是最稳妥的做法metro-website/ ├── index.html ├── about.html ├── culture.html ├── honor.html ├── org.html ├── guide.html ├── ticket.html ├── station.html ├── schedule.html ├── safety.html ├── news.html ├── news-schedule.html ├── news-activity.html ├── news-recruit.html ├── recruit.html ├── post-ui.html ├── feedback.html ├── faq.html ├── tour.html ├── contact.html ├── css/ │ └── base.css ├── js/ │ └── main.js └── images/ ├── logo.png ├── banner-1.jpg └── banner-2.jpg只要保持这个结构所有 HTML 文件里引用 CSS、JS、图片时路径永远是css/base.css、js/main.js、images/banner-1.jpg不会出现因层级不同而需要调整路径的情况。答辩的时候老师也更容易检查文件结构是否规范。3.3 新页面复制后必改的三个位置复制出一个新页面后不做任何检查就直接改内容是最容易漏事的环节。我一般复制后先做三个固定动作改title必须和 page-list 清单里的 title 一致不能出现“新建文本文档”这类默认标题改导航的active把高亮标记从复制来源页移到当前页改main里的版面结构频道页用列表结构详情页用文章结构不能把新闻详情直接套成公司简介的版式。这三个位置都改完再开始填充内容。很多同学最后被扣分就是about.html里还残留着news.html的 active 标记点开一看导航高亮指向错误页面整体印象分一下子就下来了。4. 用一份 CSS 变量和公共组件样式统一全站视觉4.1 :root 变量控制色彩、间距、阴影改一处全站跟着变20 个页面如果每个页面都写一套独立样式视觉上一定会乱这页按钮是圆角的那页按钮是方角的这页主色偏绿那页主色偏蓝。统一视觉最有效的做法是把全站需要用到的设计令牌全部收进:root。/* css/base.css 第 1 段设计变量 */ :root { --color-primary: #00843d; /* 品牌主色可替换为南昌地铁实际主色调 */ --color-primary-dark: #006b31; /* 主色的深色变体用于悬停 */ --color-bg: #f5f6f7; /* 全站浅灰背景 */ --color-text: #333333; /* 正文颜色 */ --color-text-light: #888888; /* 辅助文字 */ --radius: 6px; /* 按钮/卡片的圆角 */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); /* 卡片阴影 */ --container-width: 1200px; /* 内容区最大宽度 */ }--color-primary这个变量一旦定义全站所有用到主色的地方都写var(--color-primary)后面要整体换色只需要改这一行。比如你觉得南昌地铁的主色调需要调整不管换成绿色系还是橙色系全站 20 页一次替换完成这一条在期末答辩时非常值得主动讲给老师听。4.2 三个高频复用组件内容卡片、频道列表、正文版式企业官网里重复率最高的三类外观是首页的服务入口卡片、频道页的新闻列表条目、详情页的正文排版。把这三种样式在 base.css 里一次性写稳后面就是反复套用。/* 组件 1卡片首页和频道页通用 */ .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } /* 组件 2新闻列表条目 */ .news-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #eee; } .news-item a { color: var(--color-text); text-decoration: none; } .news-item a:hover { color: var(--color-primary); } /* 组件 3详情页正文 */ .page-main h2 { font-size: 24px; color: var(--color-text); border-left: 4px solid var(--color-primary); padding-left: 12px; margin: 24px 0 16px; } .page-main p { line-height: 1.8; margin-bottom: 16px; }注意这里的.page-main h2用了一个“左边框”的设计语言这使得所有详情页的内部标题长一个样。CSS 文件里变量是第一段、公共 reset 是第二段、组件是第三段这也是热搜词里“三行模式的 css 文件”常被理解的来源——把样式文件按“变量 / 基础 / 组件”的层次组织而不是按页面组织。4.3 一张两列的响应式布局覆盖 768px 断点作业里如果只做 PC 端答辩老师可能会追问“手机端怎么看”。加一个媒体查询并不难成本很低。最常见的做法是给首页的服务入口区写一个两列布局窄屏时自动变成一列.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } media (max-width: 768px) { .service-grid { grid-template-columns: repeat(2, 1fr); } .container { padding-left: 12px; padding-right: 12px; } }repeat(4, 1fr)表示四列等宽每列宽度的计算交给网格自动处理。媒体查询里把四列降成两列是因为手机屏宽约 375px四列会导致每张卡片只有约 80px 宽文字会挤到换行两列在 375px 宽度下每列约 160px观感更接近 App 首页的宫格布局。这个细节写进 base.css 里就相当于全站所有用到service-grid的页面自动获得了手机适配能力。5. 三个 JS 组件让静态页面有互动且不依赖框架5.1 banner 轮播用 addEventListener 监听而不是一行 inline 事件期末作业常见的第一个 JS 功能是首页 banner 轮播。很多同学习惯用img onclickchangeSlide(1)这种 inline 写法能跑但不加分。更好的做法是把逻辑全部收敛到一个main.js文件里HTML 只负责提供结构。// js/main.js首页 banner 轮播 const slides document.querySelectorAll(.banner .slide); const prevBtn document.querySelector(.banner .prev); const nextBtn document.querySelector(.banner .next); let current 0; let timer null; function goTo(index) { slides[current].classList.remove(active); // 取模运算让索引在 0 到 slides.length-1 之间循环 current (index slides.length) % slides.length; slides[current].classList.add(active); } function nextSlide() { goTo(current 1); } function startTimer() { timer setInterval(nextSlide, 3000); } function stopTimer() { clearInterval(timer); } nextBtn.addEventListener(click, function () { goTo(current 1); stopTimer(); startTimer(); }); prevBtn.addEventListener(click, function () { goTo(current - 1); stopTimer(); startTimer(); }); // 鼠标移入暂停移出继续——这个交互在答辩时很加分 const banner document.querySelector(.banner); banner.addEventListener(mouseenter, stopTimer); banner.addEventListener(mouseleave, startTimer); startTimer();goTo里的(index slides.length) % slides.length是轮播最常见的边界处理当 index 是 -1 时加上 slides.length 再取模得到最后一页当 index 等于 slides.length 时取模回到 0这样首尾切换不会越界。setInterval(nextSlide, 3000)的 3000 表示 3 秒自动切换一次数值单位是毫秒。注意stopTimer和startTimer在点击按钮后都执行一次是为了重置计时器。如果只调用 stopTimer 不重新 startTimer用户点过一次后自动轮播就永久停止了。5.2 新闻列表用 JS 渲染避免把 20 个页面写成“死内容”静态站没有后端新闻列表页面通常只能手写 HTML 列表。但更专业的做法是把新闻数据放在数组里由 JS 渲染进页面。这样后续增删新闻只需要改数组不用动 HTML 结构。// js/main.js新闻列表数据与渲染 const newsData [ { title: 1 号线运营时间调整公告, date: 2025-04-12, url: news-schedule.html }, { title: 地铁文化周活动回顾, date: 2025-04-03, url: news-activity.html }, { title: 2025 春季校园招聘正式启动, date: 2025-03-28, url: news-recruit.html } ]; const newsList document.querySelector(#news-list); if (newsList) { newsList.innerHTML newsData.map(function (item) { return li classnews-item a href item.url item.title /a span classnews-date item.date /span /li; }).join(); }newsData.map()的返回值是一个字符串数组join()把它拼成一个整体的 HTML 字符串赋给innerHTML后直接插入到#news-list这个 ul 标签内部。这个写法在期末课程里属于“数据与视图分离”的入门体现面试官或答辩老师问起来你可以直接解释每一条新闻长什么样由 HTML 模板决定而数据本身在数组里维护。5.3 根据当前文件名自动高亮导航不用每个页面手写 active第 3 章提到复制页面时要手动改classactive但更省事的方式是交给 JS 判断当前页面的文件名。把页面上所有导航链接里的 active 都去掉由这段代码自动加回去// js/main.js根据当前路径设置导航高亮 const currentPath location.pathname.split(/).pop() || index.html; const navLinks document.querySelectorAll(.main-nav a); navLinks.forEach(function (a) { const href a.getAttribute(href); if (href currentPath) { a.classList.add(active); } });location.pathname.split(/).pop()的作用是从完整路径里取出最后的文件名。比如路径是http://localhost/metro/about.html取出来的就是about.html如果当前是首页目录这个值会是空字符串所以用|| index.html补一个默认值。forEach遍历所有导航链接把 href 和当前文件名比较相等就加上 active 类。这段代码放上后20 个页面里的导航高亮就不再需要手动维护了。配合 5.2 的数据渲染你只需要在一个页面写好新闻列表的容器其他页面自动完成交互。6. 交作业前必过的四项检查路径、编码、控制台与文件命名6.1 在浏览器里打开每一页按 F12 看 Console 和 Network20 个页面全部写完不要只点开首页看一眼就打包。用 Chrome 或 Edge 打开 index.html然后逐个打开另外 19 个页面按 F12 切到 Console 面板。出现红色的报错信息说明 JS 有语法错误或选择器没匹配到元素切到 Network 面板看到 404 状态码的请求说明图片或 CSS 的路径写错了。最常见的报错是Uncaught TypeError: Cannot read properties of null这通常表示querySelector选择器没找到元素——比如当前页面根本没有#news-list但 main.js 还是尝试向它写入内容。解决方式是像 5.2 那样用if (newsList)判断元素存在再执行让一段 JS 可以在多个页面复用。6.2 检查文件名大小写与 charset 编码“index.html”和“Index.html”在 Windows 上打开看不出问题但老师把压缩包换到 macOS 或 Linux 上解压后大小写不匹配的链接就会全部 404。检查方法是在文件管理器里确认所有 HTML 文件名都是小写CSS 和图片文件名也要大小写一致。编码问题更隐蔽。用记事本编辑过 HTML 文件或在 HBuilderX 里新建但没注意编码时文件可能被存成 GBK。meta charsetUTF-8声明了 UTF-8但文件实际是 GBK浏览器会显示中文乱码。检查时看任意一个页面的中文是否显示正常全部正常才算过只要有乱码在编辑器里把文件“另存为”成 UTF-8 无 BOM 格式。6.3 用一段批量命令检查资源文件是否存在最后做一个快速自动检查。在项目根目录打开命令行执行下面的脚本它会列出所有 HTML 页面里引用了但根目录下不存在的图片和 CSS 文件for f in *.html; do grep -oE (src|href)[^] $f | \ sed s/^.*//; s/$// | \ while read path; do case $path in http*|mailto*|#) ;; *) [ -f $path ] || echo 缺失: $f - $path ;; esac done done这段命令用 grep 提取所有 src 和 href 的值过滤掉 http 开头的绝对链接和锚点链接剩下的相对路径逐个用-f判断文件是否存在。输出结果里如果没有任何“缺失”说明资源路径全部正确。建议运行环境是 macOS 或 Linux 自带的 bashWindows 下可以用 Git Bash 执行相同命令。这一步做完打包压缩作业里的“20 个页面”就不再是数字而是一套结构完整的可复用工程。本文还有配套的精品资源点击获取