简介一套面向大学生HTML5期末作业的旅游主题网站成品基于HTML5CSS3JavaScript构建“蜘蛛旅行社”共5个页面覆盖首页、关于我们、旅游路线、客户反馈与联系方式适合Web前端入门学习、课程作业参考或站点原型复用。包体共42个文件包含5个HTML页面、4个CSS样式文件以及23张JPG和7张PNG图片素材压缩包约10.67MB目录结构清晰页面、样式与图片素材分层存放便于直接运行和二次修改。目前已有230人学习下载。除完整页面外还提供Logo、景点配图、侧边栏图片等成套素材可帮助初学者理解旅游行业网站的信息架构与导航逻辑也能作为响应式布局、页面视觉设计和前端代码组织方式的实战范本从页面骨架搭建到交互效果实现形成一次完整的前端综合训练。1. 蜘蛛旅行社5个页面到底在做什么一个HTML5CSS3静态网站的完整答题卡如果你正在为大学生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 langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title蜘蛛旅行社 - 首页/title link relstylesheet hrefcss/style.css /head body header classsite-header !-- 顶部栏logo 与 slogan -- /header nav classsite-nav !-- 主导航五个页面互相跳转 -- /nav main classsite-main !-- 每个页面的独有内容 -- /main footer classsite-footer !-- 版权与联系方式 -- /footer /body /html这段骨架有三处值得较真的地方。第一link relstylesheet hrefcss/style.css必须放在head里不能放body末尾。浏览器解析 HTML 是从上往下的CSS 提前加载能避免「白屏后样式突然跳变」的画面闪动期末答辩时这算一个主动加分项。第二html langzh-cn不要省它告诉浏览器页面是简体中文对字号渲染和朗读工具都有影响。第三五个页面的title必须不同首页写「蜘蛛旅行社 - 首页」详情页写「景点详情 - 蜘蛛旅行社」这是检查页面语义化时最容易被查的一条。2.3 header与nav的共用写法一份导航复制到五个页面的正确姿势静态网站没有模板引擎五页共享导航只能靠「复制粘贴」但复制要有章法。我的做法是先写死一份导航结构再给每个页面手动调整当前页高亮。导航代码nav classsite-nav div classcontainer nav-inner a hrefindex.html classlogo蜘蛛旅行社/a ul classnav-list lia hrefindex.html classactive首页/a/li lia hrefscenic-list.html景点列表/a/li lia hrefscenic-detail.html景点详情/a/li lia hrefbooking.html线路预订/a/li lia hrefabout.html关于我们/a/li /ul /div /nav逻辑说明这里用ul包裹链接而不是直接排a是 HTML5 里导航列表的标准语义.logo也是a不是因为它是图片而是让它能点击回首页。复制到另一个页面时唯一改动是「当前页的a加classactive」比如在booking.html里预订那个链接变成a hrefbooking.html classactive。这个动作不能用 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-shadow0.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图片位置全是破图图标但图片文件明明在文件夹里。原因相对路径写错或文件名对不上。最常见的写法是hrefC:\Users\张三\Desktop\蜘蛛旅行社\images\banner.jpg——这种绝对路径在自己的电脑上能开作业交到老师电脑上必然失效。另一些情况是文件名大小写不一致比如文件叫Scenic-1.jpg代码里写scenic-1.jpgWindows 的资源管理器不区分大小写所以能显示但交到 Mac 或在线评审环境就 404。解决图片路径一律用相对路径。首页在根目录图片引用写成images/banner.jpg如果子页面放在pages/文件夹里引用要写成../images/banner.jpg。文件名统一小写英文加数字用连字符分隔不要带空格和中文。写完代码后故意把图片文件夹从当前目录挪出去再挪回来重新刷页面验证路径没写死。4.2 CSS改了没反应引入方式、标签闭合与缓存现象在style.css里改了背景色刷新浏览器没变化甚至完全没样式。原因三个方向逐一排查。第一CSS 可能同时用了外链、style内嵌、行内style三种方式后两种的优先级高于外链外链改了被内嵌样式覆盖。第二head里的link标签可能没闭合或者href路径有个css/前缀错误。第三浏览器缓存了旧 CSS。解决全站只保留一种引入方式外链写link relstylesheet hrefcss/style.css不要混用。检查 HTML 标签闭合一个没闭合的div会让后面的结构全乱。刷新时按Ctrl F5强制刷新跳过缓存。如果还是没有样式右键查看网页源代码点击 CSS 链接看能不能打开、打开后内容是不是你写的——这能直接区分是路径问题还是文件内容问题。4.3 换台电脑效果就翻车字体栈、浏览器与默认样式差异现象在自己电脑上排版端正拷到别的电脑或换 Chrome 变 Firefox间距、字体、卡片宽度全不对。原因字体缺失是最常见的。代码里只写了font-family: 微软雅黑而对方电脑是 Mac根本没有这个字体页面回退成默认宋体字宽和行高全变化。其次不同浏览器的默认样式表差别很大你没做 resetFirefox 的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。如果你压根没写 JSConsole 里出现 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# methodpost classbooking-form div classform-row label forname姓名/label input typetext idname namename required placeholder请输入真实姓名 /div div classform-row label forphone联系电话/label input typetel idphone namephone pattern[0-9]{11} required placeholder11位手机号 /div div classform-row label fordate出发日期/label input typedate iddate namedate required /div div classform-row label formessage出行备注/label textarea idmessage namemessage rows4 placeholder如需要接机、老人小孩同行等/textarea /div button typesubmit classbtn提交预订/button /form逻辑说明label for和input id必须配对点击提示文字时能聚焦输入框这是原生 HTML 的无障碍要求老师一眼就能看出来。required让空表单无法提交浏览器会弹出「请填写此字段」的提示不需要写 JavaScript。pattern[0-9]{11}把电话限定为 11 位数字typetel在手机浏览器上会弹数字键盘。typedate直接调用浏览器的日期选择器这是 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 请求的状态码是否为 200304 是缓存也算正常。第三设备模拟。按F12后点击面板左上角的设备图标把视口切到 iPhone 或 iPad 尺寸。老师如果顺手把窗口拖窄你至少要知道页面在窄屏下不会横向溢出。纯 CSS 静态作业不要求做完整响应式但做到「没有横向滚动条」这一条底线比直接放弃好得多。6.2 复制到新电脑自检一遍再交最后一件事听起来麻烦但能拦下八成返工把整个项目文件夹复制到一个完全新的路径比如C:\Users\你的用户名\Desktop\test\直接双击打开index.html把五个页面所有链接点一遍图片和样式只要有一个裂的就按第 4 章的清单往回排查。我自己每次交网页作业或项目都保留这条习惯——在本机怎么开发都可能被路径欺骗换一个位置打开才是用户真实的打开方式。再补一个进阶小技巧。如果想让首页的推荐卡片有些灵动感可以使用 CSS 涟漪光圈扩散效果给卡片的图片加一层::afterhover 时用box-shadow从 0 扩散到 60px 并渐隐到透明一个简单的keyframes就能在鼠标移入时出现向外扩散的光圈。这个效果唯一的注意点是给父容器加overflow: hidden否则光圈扩散出卡片边界会触发横向滚动条。做这个小动效的意义不只是好看它还让你在答辩时多讲一个 CSS3 知识点。期末作业做五个页面的蜘蛛旅行社本质不是「做五个网页」而是把 HTML5 语义结构、CSS3 选择器与布局、相对路径、表单校验这些基本功在一套完整场景里串起来。你遇到的所有奇怪现象九成是路径和选择器优先级的问题不是玄学。按目录树搭骨架、共用样式表、手动切换导航高亮每一步能说出「为什么这么写」答辩时自然有底气。希望这篇笔记帮到正在赶作业的你。本文还有配套的精品资源点击获取