简介：一套面向大学生HTML5期末作业的旅游主题网站成品，基于HTML5+CSS3+JavaScript构建“蜘蛛旅行社”共5个页面，覆盖首页、关于我们、旅游路线、客户反馈与联系方式，适合Web前端入门学习、课程作业参考或站点原型复用。包体共42个文件，包含5个HTML页面、4个CSS样式文件，以及23张JPG和7张PNG图片素材，压缩包约10.67MB，目录结构清晰，页面、样式与图片素材分层存放，便于直接运行和二次修改。目前已有230人学习下载。除完整页面外，还提供Logo、景点配图、侧边栏图片等成套素材，可帮助初学者理解旅游行业网站的信息架构与导航逻辑，也能作为响应式布局、页面视觉设计和前端代码组织方式的实战范本，从页面骨架搭建到交互效果实现，形成一次完整的前端综合训练。
1. 蜘蛛旅行社5个页面，到底在做什么：一个HTML5+CSS3静态网站的完整答题卡
如果你正在为大学生HTML5期末作业发愁，看到“旅游 蜘蛛旅行社5个页面”这个标题，大概率知道自己要交的东西不复杂：用纯 HTML + CSS 写一个旅游主题的静态网站，页面数量固定，不依赖后端，也不用写 JavaScript 交互。这个方向在 Web前端 课程里几乎是标准套餐——老师要看的是你懂不懂页面结构、样式组织和浏览器渲染逻辑，而不是功能多花哨。蜘蛛旅行社这类选题的好处是内容域足够宽，首页能放 banner、热门线路、景点卡片，二级页面能拆成列表、详情、预订、关于我们，五个页面正好把所有 HTML5 语义标签和 CSS3 常见布局串一遍。这篇笔记我从目录结构讲起，到避坑、排错和验收收尾，按一套「打开编辑器就能跟着敲」的路径来，目标是让你交出去的成品经得起检查，也能在答辩时讲清楚每一行样式为什么在这里。
2. 从目录树拆出五个页面：信息架构与共用骨架
2.1 五个页面分别扛什么角色：蜘蛛旅行社的信息架构表
一个 5 页静态网站最忌页页相似，也忌五个页面各自为政。动工前先把每个页面要扮演的角色列清楚，后面写 HTML 才不会前后矛盾。蜘蛛旅行社我一般这样拆分：
| 页面 | 文件名 | 核心内容 | 实现要点 |
|---|---|---|---|
| 首页 | index.html | 品牌横幅、热门线路推荐、最新活动、页脚联系信息 | 视觉重心在 banner，卡片区用 flex 一排三列 |
| 景点列表 | scenic-list.html | 全部景点卡片集合，每张卡片有图、名称、简介、查看详情链接 | 列表页与首页的卡片视觉要一致，跳转指向详情页 |
| 景点详情 | scenic-detail.html | 单景点大图、详细介绍、行程表格、价格说明、预订按钮 | 布局改左右分栏，右侧放行程与费用，按钮跳预订页 |
| 线路预订 | booking.html | 预订表单：姓名、电话、日期、出行人数、备注 | 表单控件全部用 label 关联，校验交给 HTML5 属性 |
| 关于我们 | about.html | 旅行社简介、团队介绍、联系方式、页脚地图占位 | 以文本排版为主，段落间距和标题层级是重点 |
这个设计的关键是「列表页只给摘要，详情页给完整内容，预订页完成转化动作」，三页之间有明确的跳转逻辑，老师用鼠标走一遍就知道网站是完整而不是拿五个空壳拼的。文件命名建议全小写英文，scenic-list.html比jingdian.html更规范，也避免某些解压环境下中文文件名出问题。
2.2 HTML5页面骨架：一个模板改五遍不如一份骨架补齐
五个页面共用同一份头部、导航和页脚，是静态网站最高效的写法。先建一个标准骨架，确定lang、字符集、视口和 CSS 引入位置，再往里填内容。骨架代码：
<!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="css/style.css"> </head> <body> <header class="site-header"> <!-- 顶部栏：logo 与 slogan --> </header> <nav class="site-nav"> <!-- 主导航：五个页面互相跳转 --> </nav> <main class="site-main"> <!-- 每个页面的独有内容 --> </main> <footer class="site-footer"> <!-- 版权与联系方式 --> </footer> </body> </html>这段骨架有三处值得较真的地方。第一，<link rel="stylesheet" href="css/style.css">必须放在<head>里，不能放<body>末尾。浏览器解析 HTML 是从上往下的，CSS 提前加载能避免「白屏后样式突然跳变」的画面闪动，期末答辩时这算一个主动加分项。第二，html lang="zh-cn"不要省，它告诉浏览器页面是简体中文，对字号渲染和朗读工具都有影响。第三，五个页面的<title>必须不同，首页写「蜘蛛旅行社 - 首页」，详情页写「景点详情 - 蜘蛛旅行社」，这是检查页面语义化时最容易被查的一条。
2.3 header与nav的共用写法：一份导航复制到五个页面的正确姿势
静态网站没有模板引擎，五页共享导航只能靠「复制粘贴」，但复制要有章法。我的做法是先写死一份导航结构，再给每个页面手动调整当前页高亮。导航代码：
<nav class="site-nav"> <div class="container nav-inner"> <a href="index.html" class="logo">蜘蛛旅行社</a> <ul class="nav-list"> <li><a href="index.html" class="active">首页</a></li> <li><a href="scenic-list.html">景点列表</a></li> <li><a href="scenic-detail.html">景点详情</a></li> <li><a href="booking.html">线路预订</a></li> <li><a href="about.html">关于我们</a></li> </ul> </div> </nav>逻辑说明：这里用<ul>包裹链接而不是直接排<a>，是 HTML5 里导航列表的标准语义；.logo也是<a>不是因为它是图片，而是让它能点击回首页。复制到另一个页面时，唯一改动是「当前页的<a>加class="active"」，比如在booking.html里，预订那个链接变成<a href="booking.html" class="active">。这个动作不能用 CSS 自动判断——纯 CSS 做不到知道当前页面是谁，只能手动切换，所以五个页面导航结构完全一致，只差这个类名。千万不要五个页面导航的顺序不一样，那是初学者最容易暴露的破绽。
3. CSS3落地参数：重置样式、渐变、过渡与字体细节
3.1 全局重置与基础容器：先把盒子模型和字体栈钉死
写样式最大的敌人是浏览器默认样式。不同浏览器给body的边距、标题的字号、ul的缩进都不一样，不先重置，你调的间距换个浏览器就移位。我习惯直接把重置和基础样式放在style.css顶部，作为全站的地基：
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f7f7f2; } .container { max-width: 1200px; width: 92%; margin: 0 auto; }参数说明：box-sizing: border-box是必修课——它让width包含padding和border，否则你写一个width: 100%的卡片再加上padding，宽度会溢出父容器，这是网页布局里翻车概率最高的玄学之一。font-family里把微软雅黑放前面，是因为 Windows 电脑上期末答辩最常见的环境；如果换到 Mac，会按顺序落到苹方或者 Helvetica。line-height: 1.6是正文最舒服的行距，小于 1.4 会让段落发紧，大于 1.8 又显得空。.container用max-width限宽，保证浏览器全屏时内容不会拉成一条横贯屏幕的长线。
3.2 热门线路卡片的微交互：transform、box-shadow与过渡参数
蜘蛛旅行社首页的核心内容是热门线路卡片。卡片能不能做出「像样作品」的感觉，差距就在 hover 反馈上。五个页面只要是卡片形态，都复用同一套类名，样式做到一次定义、处处生效：
.card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .card img { display: block; width: 100%; height: 200px; object-fit: cover; }参数说明：transition里我同时过渡transform和box-shadow，0.25 秒是卡片浮起的标准手感，太快像闪烁，太慢像卡顿。translateY(-4px)是上浮幅度，2px 太不明显，6px 会显得飘。阴影的rgba(0,0,0,0.06)和0.12分别对应静态和悬浮状态，透明度不能太高，否则页面会脏。图片的height: 200px加object-fit: cover是核心——它让宽高比不同的图片统一裁剪成 200px 高度，不会挤变形。如果不加overflow: hidden，图片圆角会被直角截断，border-radius 白写了。
3.3 标题渐变与按钮配色：用linear-gradient和filter提升完成度
纯色页面容易显得单薄，CSS3 的渐变是成本最低的提气质手段。蜘蛛旅行社的品牌色我建议走自然绿，和“蜘蛛”的丛林感呼应。按钮和主标题可以这样处理：
.btn { display: inline-block; padding: 10px 24px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #2f6d4f, #4a9b6f); text-decoration: none; font-size: 14px; } .btn:hover { filter: brightness(1.05); } .section-title { font-size: 28px; font-weight: 700; background: linear-gradient(120deg, #2f6d4f, #7fb069); -webkit-background-clip: text; background-clip: text; color: transparent; }参数说明：按钮渐变135deg表示从左上到右下，深浅两色形成立体感。hover 用filter: brightness(1.05)比换背景色更省事，颜色微亮一下不土。.section-title的字体渐变是字体设计里的常见做法：background-clip: text把背景裁剪成文字形状，color: transparent让底色透出来，文字就成了渐变色。注意-webkit-background-clip: text前缀不能删，Safari 和旧版 Chrome 没有前缀就不生效。按钮字重不要低于 600，否则白字在亮绿底上发虚。
4. 期末作业最易翻车的五个地方：从图片路径到提交打包的排查清单
4.1 图片大面积不显示：相对路径、大小写与目录层级
现象：本地打开 HTML，图片位置全是破图图标，但图片文件明明在文件夹里。
原因：相对路径写错或文件名对不上。最常见的写法是href="C:\Users\张三\Desktop\蜘蛛旅行社\images\banner.jpg"——这种绝对路径在自己的电脑上能开，作业交到老师电脑上必然失效。另一些情况是文件名大小写不一致，比如文件叫Scenic-1.jpg，代码里写scenic-1.jpg，Windows 的资源管理器不区分大小写所以能显示，但交到 Mac 或在线评审环境就 404。
解决：图片路径一律用相对路径。首页在根目录，图片引用写成images/banner.jpg；如果子页面放在pages/文件夹里，引用要写成../images/banner.jpg。文件名统一小写英文加数字，用连字符分隔，不要带空格和中文。写完代码后，故意把图片文件夹从当前目录挪出去再挪回来，重新刷页面验证路径没写死。
4.2 CSS改了没反应：引入方式、标签闭合与缓存
现象：在style.css里改了背景色，刷新浏览器没变化，甚至完全没样式。
原因：三个方向逐一排查。第一，CSS 可能同时用了外链、<style>内嵌、行内style=""三种方式，后两种的优先级高于外链，外链改了被内嵌样式覆盖。第二，<head>里的<link>标签可能没闭合，或者href路径有个css/前缀错误。第三，浏览器缓存了旧 CSS。
解决：全站只保留一种引入方式，外链写<link rel="stylesheet" href="css/style.css">，不要混用。检查 HTML 标签闭合，一个没闭合的<div>会让后面的结构全乱。刷新时按Ctrl + F5强制刷新，跳过缓存。如果还是没有样式，右键查看网页源代码，点击 CSS 链接看能不能打开、打开后内容是不是你写的——这能直接区分是路径问题还是文件内容问题。
4.3 换台电脑效果就翻车：字体栈、浏览器与默认样式差异
现象：在自己电脑上排版端正，拷到别的电脑或换 Chrome 变 Firefox，间距、字体、卡片宽度全不对。
原因：字体缺失是最常见的。代码里只写了font-family: "微软雅黑"，而对方电脑是 Mac，根本没有这个字体，页面回退成默认宋体，字宽和行高全变化。其次，不同浏览器的默认样式表差别很大，你没做 reset，Firefox 的ul默认内边距和 Chrome 不一样。再就是忘了声明<!DOCTYPE html>，页面跑在怪异模式，盒模型计算方式直接不同。
解决：字体栈按「主字体在前、通用兜底在后」写全，即"Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif。全站保留*重置。确认每个 HTML 第一行都有<!DOCTYPE html>，这一段缺失是页面在各种环境表现不一致的头号原因。
4.4 打包提交后文件缺失：目录树与相对路径再核对
现象：压缩包发出去，对方解压后打开 HTML，页面是纯文本裸样式，图片全裂。
原因：很简单，文件的目录结构被破坏了。很多人交作业时把五个 HTML 从根目录拖出来单独压缩，CSS 和 images 文件夹落在了外面，相对路径全部失效。还有人把style.css误放进了images/文件夹里。这类问题在本地几乎发现不了，因为编辑器打开的是原路径。
解决：提交前不看单个文件，看整个目录树。根目录必须同时有五个.html文件、css/文件夹、images/文件夹，层级关系和你写代码时一致。压缩前不要改文件夹的名字，不要只挑 HTML 文件打包。最后在打包完的压缩包里双击打开一次首页，点遍五个页面和全部图片，确认没有残留C:\开头的绝对路径。
4.5 控制台报错不等于页面坏了
现象：按F12打开开发者工具，Console 面板有红字报错，于是慌着到处改代码。
原因：很多报错是浏览器自己发出的请求，和你的页面质量无关。最常见的是favicon.ico 404——你根本没准备站点图标，浏览器默认请求一个，没找到就报一条。还有老版本的 Google 字体库被墙了或者网络慢，这些都不影响页面展示。
解决：先看报错来源，点开报错右侧的文件名，如果指向你自己的 JS，才需要处理；纯静态页面最常见的无非就是 favicon 404。如果你压根没写 JS，Console 里出现 JS 相关红字，先检查是不是浏览器插件的报错。不要为了消灭所有报错去过度处理，期末作业核心是页面结构和样式正确，不是零告警。
5. 把二级页面做得像完整网站：详情页、预订表单与文本页的15个细节
5.1 详情页的6个细节：面包屑、锚点区间、费用表与返回入口
景点详情页是五页里信息最密的页面，最怕做成「一张大图加几段字」的填空页。我写详情页会扣这六个细节。
第一，面包屑导航。在页面顶部标题上方放一行「首页 / 景点列表 / 玉龙雪山」，让评审老师知道你理解页面层级，而不是只会平铺五个页面。
第二，大图区用figure包裹，figcaption写图注。这比裸放一个<img>语义更到位。
第三，页面结构用左右两栏：左侧是介绍文本，右侧是「行程信息」卡片，卡片里放出发地、天数、价格、成团人数，用<dl>定义列表而不是<table>，因为这是「一组名词对应的描述」，语义更准确。
第四，长介绍文配锚点。在介绍顶部放三个小链接「行程亮点 / 费用说明 / 预订须知」，href分别指向#highlight、#cost、#notice对应的块级容器，点击能跳转到页内区间。这是纯 HTML 实现页面内导航的唯一可靠方式，不需要 JavaScript。
第五，费用说明用表格。行是「项目/费用/说明」，列写清楚包含和不包含的费用，注意表头用<th>，表数据用<td>，这是期末作业里唯一推荐用<table>的地方。
第六，正文末尾放一个醒目的预订按钮，点击跳booking.html，按钮下方再放一个「返回列表」文字链接。这形成完整闭环——用户从列表来，看完详情，要么去预订，要么回列表，不会卡死在页尾。
5.2 预订表单的5个细节：label关联、required校验与占位文案
预订页是全站唯一带交互元素的页面，做得规范是加分项。表单代码：
<form action="#" method="post" class="booking-form"> <div class="form-row"> <label for="name">姓名</label> <input type="text" id="name" name="name" required placeholder="请输入真实姓名"> </div> <div class="form-row"> <label for="phone">联系电话</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required placeholder="11位手机号"> </div> <div class="form-row"> <label for="date">出发日期</label> <input type="date" id="date" name="date" required> </div> <div class="form-row"> <label for="message">出行备注</label> <textarea id="message" name="message" rows="4" placeholder="如：需要接机、老人小孩同行等"></textarea> </div> <button type="submit" class="btn">提交预订</button> </form>逻辑说明：label for和input id必须配对，点击提示文字时能聚焦输入框，这是原生 HTML 的无障碍要求，老师一眼就能看出来。required让空表单无法提交，浏览器会弹出「请填写此字段」的提示，不需要写 JavaScript。pattern="[0-9]{11}"把电话限定为 11 位数字，type="tel"在手机浏览器上会弹数字键盘。type="date"直接调用浏览器的日期选择器，这是 HTML5 的另一个内置能力。文本域给rows就够，不要用 CSS 强行改高度，保持 HTML 默认语义。action="#"是因为静态页面没有后端地址，代表表单提交到当前页面，属于静态演示的正常写法。
表单底下别忘了加一个「预订须知」的<ul>列表，写清退改规则、成团说明、儿童价三个条目。一方面填充内容，另一方面让评审知道你注意到了从用户角度设定预期。须知列表放在表单下方而不是上方，避免用户一进来看到一堆规则劝退。
5.3 关于我们和文本页的4个细节：段距、首行缩进、联系信息与页脚
关于我们页是纯文本页，没有图片和卡片，最考验排版基本功。我用四个细节保证它不是一坨大段文字。
第一，段落间距用margin: 0 0 1em，不要用空行<br>撑距离。设定正文基准行距 1.6 之后，标题与正文间距也要统一。
第二，中文正文段落首行缩进两字符，用text-indent: 2em。这里em是相对单位，跟随当前字号自动两字符，远比写死32px可靠。
第三，团队介绍卡片化。四个人每人一张小卡片，只有名字、职位和一句话介绍，不堆大段履历。用 flex 横排，每个卡片宽度flex: 1，中间用间隙分开。
第四，联系信息块用<address>标签包起来，里面放电话、邮箱和地址。页脚区写版权信息，格式是「© 2025 蜘蛛旅行社」，全站五个页面保留同一段页脚，但版权年份用当前年份填充。地址后面可以放一个静态地图占位图，不需要嵌入地图服务，一张截图加上border-radius就够。
6. 收尾验收：用开发者工具把五个页面之间的链接关系排查一遍
6.1 三个最有效的核查动作：Elements、Network与设备模拟
做完全部页面，最后一小时不要急着压缩打包，先打开开发者工具做三件事。
第一，Elements 面板。用箭头图标点选页面上的元素，看高亮的 HTML 结构是否正确，有没有多出没闭合的标签。再检查一下当前页的导航项有没有.active类，五个页面各点一遍，确认每次只有一个导航项高亮且在正确的页面上。
第二，Network 面板。直接刷新页面，看网络请求列表里有没有红色的失败项。重点看图片请求数量是否等于images文件夹里的实际文件数。如果图片文件叫banner.jpg，请求列表里却是banner.JPG，说明代码里文件名大小写不一致，尽早改掉。再检查 CSS 请求的状态码是否为 200，304 是缓存也算正常。
第三，设备模拟。按F12后点击面板左上角的设备图标，把视口切到 iPhone 或 iPad 尺寸。老师如果顺手把窗口拖窄，你至少要知道页面在窄屏下不会横向溢出。纯 CSS 静态作业不要求做完整响应式，但做到「没有横向滚动条」这一条底线，比直接放弃好得多。
6.2 复制到新电脑自检一遍再交
最后一件事听起来麻烦，但能拦下八成返工：把整个项目文件夹复制到一个完全新的路径（比如C:\Users\你的用户名\Desktop\test\），直接双击打开index.html，把五个页面所有链接点一遍，图片和样式只要有一个裂的，就按第 4 章的清单往回排查。我自己每次交网页作业或项目都保留这条习惯——在本机怎么开发都可能被路径欺骗，换一个位置打开才是用户真实的打开方式。
再补一个进阶小技巧。如果想让首页的推荐卡片有些灵动感，可以使用 CSS 涟漪光圈扩散效果：给卡片的图片加一层::after，hover 时用box-shadow从 0 扩散到 60px 并渐隐到透明，一个简单的@keyframes就能在鼠标移入时出现向外扩散的光圈。这个效果唯一的注意点是给父容器加overflow: hidden，否则光圈扩散出卡片边界会触发横向滚动条。做这个小动效的意义不只是好看，它还让你在答辩时多讲一个 CSS3 知识点。
期末作业做五个页面的蜘蛛旅行社，本质不是「做五个网页」，而是把 HTML5 语义结构、CSS3 选择器与布局、相对路径、表单校验这些基本功在一套完整场景里串起来。你遇到的所有奇怪现象，九成是路径和选择器优先级的问题，不是玄学。按目录树搭骨架、共用样式表、手动切换导航高亮，每一步能说出「为什么这么写」，答辩时自然有底气。希望这篇笔记帮到正在赶作业的你。
本文还有配套的精品资源，点击获取
