简介网页设计是前端学习中的核心技能而旅游网站因其信息架构清晰、页面类型丰富成为实践HTML5与CSS3的理想载体。从概念上讲一个完整的门户网站需要首页、列表页、详情页、表单页等多种页面协同这恰好覆盖了语义化标签、Flex/Grid布局、响应式适配、JavaScript交互等关键技术原理。通过合理规划公共模块与页面模板不仅能有效控制多页面的开发成本还能提升整站的专业度与可维护性。在实际工程中轮播图、Tab筛选、表单校验、滚动变色导航等交互组件既锻炼了原生JS能力也直接提升了用户体验。无论是课程作业、毕业设计还是个人作品集掌握旅游网站的完整搭建流程都能让你在Web前端领域打下扎实基础。本文以厦门旅游网为例详细拆解14个页面的结构设计、代码实现与答辩要点为需要完成同类项目的开发者提供一套可直接参考的实践路径。 大学网页设计作业做旅游网站基本是大家绕不开的题。你可能在课程群、毕设网站、各种素材站见过“厦门旅游网”这个名字它几乎是HTML5期末作业的经典选题。14个页面这个规模听起来工作量不小但如果结构规划对了其实比“1个超长页面JS堆逻辑”要稳妥得多也更容易拿到高分。这篇就把我做这个项目的完整思路、页面拆分、踩坑细节和提交流程整理出来给正在做类似Web前端网页制作的你一份可以直接抄作业的方案。1. 项目整体设计与页面架构1.1 14个页面怎么拆才不累我拿到“14个页面”这个要求时第一反应不是“写14个完全不同的网页”而是先做内容规划和模块复用。旅游网站天然适合信息架构拆分因为厦门旅游网的核心内容无非就是首页、景点列表、景点详情、美食、线路、攻略、酒店、交通、购物、关于我们、联系、登录注册再加上辅助性的Footer信息和404页14个页面非常容易凑满。我实际做的时候采用的是“一个首页 五个一级栏目页 三个列表页 三个详情页 一个登录页 一个注册页”的组合。具体列表页面文件名页面类型主要作用首页index.html综合展示导航入口、轮播图、精选景点、最新攻略、底部信息景点列表scenic.html列表页展示厦门主要景点卡片带筛选按钮景点详情scenic-detail.html详情页单个景点的图文详细介绍、交通信息、点评美食列表food.html列表页厦门特色小吃、餐厅推荐美食详情food-detail.html详情页沙茶面、海蛎煎等美食介绍旅游线路line.html单页栏目一日游、两日游行程方案攻略列表guide.html列表页按标签分组的攻略内容攻略详情guide-detail.html详情页完整游记内容酒店推荐hotel.html单页栏目酒店团购式卡片列表交通出行traffic.html单页栏目轮渡、公交、地铁、出租车信息购物特产shopping.html单页栏目伴手礼推荐关于我们about.html单页栏目网站介绍、联系方式用户登录login.html功能页登录表单 JS校验用户注册register.html功能页注册表单 JS校验这个架构的好处是每个页面都不是孤立的列表页给详情页导流详情页又靠公共的侧边栏连回列表页。即便是期末作业也要体现出“网站是一个整体”的产品意识而不是14个孤零零的单页堆砌。1.2 为什么选择厦门旅游网这个选题选厦门一是因为厦门作为旅游城市知名度高、景点数量多素材容易找图片资源丰富做出来的页面视觉上不会显得空二是旅游网站涉及的页面类型多——列表、详情、图文混排、表单几乎能把课上学的HTML标签和CSS属性全部用上期末答辩时也方便展示“我做了哪些东西”。相比之下“个人主页”“XX产品官网”这类选题页面数量少硬凑14个页面会非常牵强。而且如果你只是换图片换文字导师一眼就能看出来是模板站。厦门旅游网则相反你可以合理地解释成“我规划了一个完整的旅游信息门户”在答辩时可以说清楚每个页面在整站中的角色定位这是加分项。1.3 公共模块先行导航、Footer和侧边栏我强烈建议你不要一上来就写14个页面的body内容而是先做一套公共的样子出来。首页、列表页、详情页、登录页的基本骨架是一致的顶部导航栏、中间内容区、底部Footer。不同页面只是内容区不同。导航栏我采用的是经典的“Logo居左 菜单居中 登录注册按钮靠右”结构。用Flex布局做弹性排列这样在1366宽和1920宽的屏幕上都不会散架。菜单项我放了首页、景点、美食、线路、攻略、酒店、交通、购物正好对应一级栏目。Footer部分我做成了三栏结构左栏放站点简介中栏放友情链接右栏放备案信息栏和版权声明。这个结构算是行业标配但期末作业里能把Footer做完整的并不多。你的Footer一旦能撑起来整站的专业度直接上一个台阶。公共模块还有一项是侧边栏。景点详情页、攻略详情页、美食详情页我都设计了右侧的“热门推荐”模块内容和列表页的数据联动纯粹用CSSHTML写死也可以不用上JS。实操建议把公共头部和Footer单独存成 header.html 和 footer.html虽然纯静态页面没法用 include 直接引入除非你用iframe或者服务端环境但你可以留一个“维护清单”在收尾阶段逐页统一复制反而更稳定。如果用了JS的fetch或者jQuery的load来动态加载公共部分在本地双击打开时会因为file协议跨域失效除非你用Live Server或部署到Gitee Pages。期末作业要考虑答辩现场是否联网所以本地能直接双击运行有时比“架构最优”更重要。2. 核心前端技术与代码实现要点2.1 HTML5语义化标签别让整页都是div很多同学的网页打开源码从头到尾全是div嵌套div浏览器和老师看了都很崩溃。HTML5引入的语义化标签就是用来解决这个问题的。我的每个页面都严格使用了 header、nav、main、section、article、aside、footer 这套骨架。以景点详情页为例页面主体结构是这样header nav ul lia hrefindex.html首页/a/li lia hrefscenic.html景点/a/li !-- 其他菜单项 -- /ul /nav /header main article classscenic-detail h1鼓浪屿/h1 p classsubtitle世界文化遗产海上花园/p section classgallery !-- 景点图片轮播区域 -- /section section classintroduction !-- 详情介绍文字 -- /section /article aside classsidebar h3热门推荐/h3 !-- 推荐列表 -- /aside /main footer !-- 公共底部 -- /footer使用语义化标签的好处一是代码可读性强答辩时老师扫一眼源码就知道你用了HTML5的新特性二是对SEO和后期维护都更友好。你不用做到极致的完美语义化但至少 header、footer、nav、main 这些最基础的要用起来。2.2 CSS3布局别再只用float做页面CSS3里的Flex布局和Grid网格布局是我这次项目的绝对主力。很多同学还停留在“大盒子套小盒子全部用 floatleft”的思路。说实话float并没有错但在写响应式和等分布局时Flex和Grid的效率高太多。景点列表页我用了Grid布局一屏放三列卡片然后通过媒体查询在平板宽度变成两列手机宽度变成一列.scenic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } media (max-width: 992px) { .scenic-grid { grid-template-columns: repeat(2, 1fr); } } media (max-width: 576px) { .scenic-grid { grid-template-columns: 1fr; } }Flex布局用于导航栏、卡片内部的对齐、按钮排布等。比如一张景点卡片图片固定高度下方文字区用Flex的column方向把“简介”撑满中间、把“查看更多”按钮压在底部这样即使简介文字长短不一致卡片高度也能对齐不会有那种“一张卡高一张卡矮”的错落感。CSS3我还在两个地方刻意使用了新属性一是圆角和阴影给图片卡片加了 border-radius: 12px 和 box-shadow这种柔和质感对旅游类网站的视觉非常重要二是过渡动画导航栏下拉菜单用了 opacity transform 实现淡入淡出而不是单纯地 display:none 到 display:block 的直接切换。2.3 JavaScript交互轮播图、Tab切换与表单校验期末作业不需要你写一个完整的Vue或React项目但纯静态页面配合适度的原生JavaScript反而更能展现你对前端基础知识的掌握程度。我按照“页面交互分层”的思路只做了三块JS首页轮播、列表页Tab筛选、登录注册表单校验。轮播图是首页的核心交互组件。我用原生JS实现了一个简单的自动播放轮播支持左右按钮切换、圆点指示器、鼠标悬停暂停const banner document.querySelector(.banner); const slides banner.querySelectorAll(.slide); const dots banner.querySelectorAll(.dot); const prevBtn document.getElementById(prevBtn); const nextBtn document.getElementById(nextBtn); let currentIndex 0; let timer null; function showSlide(index) { if (index slides.length) currentIndex 0; else if (index 0) currentIndex slides.length - 1; else currentIndex index; slides.forEach((slide, i) { slide.style.display i currentIndex ? block : none; }); dots.forEach((dot, i) { dot.classList.toggle(active, i currentIndex); }); } function nextSlide() { showSlide(currentIndex 1); } function prevSlide() { showSlide(currentIndex - 1); } prevBtn.addEventListener(click, () { prevSlide(); restartAutoPlay(); }); nextBtn.addEventListener(click, () { nextSlide(); restartAutoPlay(); }); function restartAutoPlay() { clearInterval(timer); timer setInterval(nextSlide, 4000); } timer setInterval(nextSlide, 4000);这段代码的逻辑不复杂但已经把“状态管理”和“事件绑定”这两个概念都包含了。期末答辩时如果把每行代码的意思讲清楚比你写了上百行但从没运行成功要强得多。Tab切换我用在了景点列表页的“热门 / 海岛 / 文化 / 亲子”分类筛选上。点击不同Tab切换显示对应的景点卡片。一开始我直接为每个Tab写死的显示隐藏后来换成数据驱动的方式更省代码“卡片元素上设置>const hamburger document.querySelector(.hamburger); const navMenu document.querySelector(.nav-menu); hamburger.addEventListener(click, function() { navMenu.classList.toggle(active); });CSS方面对应的写法是默认状态下 .nav-menu 为 display:none加上 .active 后改为 display:flex 并以纵向排列。这种“类名驱动状态”是前端最基础也最实用的切换套路。3. 实操过程与核心环节实现3.1 项目目录结构从第一天就别乱很多同学做14个页面到最后文件乱七八糟散在桌面图片有大有小CSS全部内联在style标签里JS写在页面底部自己都搞不清哪个是哪个。我的建议是项目从第一天开始就建立规范目录xiamen-travel/ ├── index.html ├── scenic.html ├── scenic-detail.html ├── food.html ├── food-detail.html ├── line.html ├── guide.html ├── guide-detail.html ├── hotel.html ├── traffic.html ├── shopping.html ├── about.html ├── login.html ├── register.html ├── css/ │ ├── common.css # 公共样式导航、Footer、侧边栏 │ ├── index.css # 首页专用样式 │ ├── list.css # 列表页共用样式 │ └── detail.css # 详情页共用样式 ├── js/ │ ├── banner.js # 轮播图 │ ├── tab.js # Tab切换 │ ├── form.js # 注册登录校验 │ └── common.js # 导航、回到顶部 ├── images/ │ ├── banner/ # 轮播图 │ ├── scenic/ # 景点图 │ ├── food/ # 美食图 │ └── icons/ # 小图标 └── README.mdCSS拆分成 common、index、list、detail 四个文件而不是14个页面各写一个这是从“维护成本”角度出发的。因为列表页长得都差不多共用一个 list.css 完全够用详情页同理。JS也按功能拆分每个文件内的代码都有清晰注释方便答辩时讲解。图片命名我坚持用英文小写加连字符比如 gulangyu-main.jpg、shacha-noodle-01.jpg。不要用中文命名也不要直接从百度下载后系统默认的 123456_random.jpg。原因很简单一是部署到服务器上中文路径容易出问题二是你自己后期想替换图片时看文件名就能知道图的内容不用一张张打开确认。3.2 首页开发实战从导航到轮播到经典景点推荐首页是整站的脸面也是我花时间最多的地方。我按从上到下的顺序逐步实现第一屏是导航栏 轮播图。导航栏高度设为 70px背景用半透明白色加轻微模糊属性 backdrop-filter: blur(10px)做出毛玻璃质感。轮播图的高度我设置为 520px图片做 background-size: cover 铺满避免不同尺寸图片拉伸变形。每张轮播图上叠加一个渐变遮罩层让上面的白色文字清晰可读这个细节在很多大学生作业里看不到。轮播图下方是“热门景点直通车”我用四个图标按钮鼓浪屿、厦门大学、环岛路、南普陀寺。每个图标加圆形边框hover时背景色渐变填充配CSS过渡效果。点击图标直接跳转到对应的景点详情页。再往下是“精选景点推荐”这是首页信息密度最高的区域。我放六张景点卡片两行三列。每张卡片包含图片、景点名称、一句话简介、评分和“查看详情”按钮。评分用五颗星图标其中根据评分显示实心星和空心星的数量。这部分我直接用CSS控制图标不用图片素材也避免了版权问题。首页底部我放了“最新攻略”模块用横向滚动的容器展示三篇攻略文章。横排卡片超出部分设置 overflow-x: auto 实现横向滑动在移动端也可以用手指滑动浏览。最后就是公共Footer。首页开发过程有一个细节让我印象很深一开始我把导航栏的菜单项做成了纯白色底结果轮播图是浅色照片时导航文字完全看不清。后来我改成了“默认白底黑字 滚动后透明底白字”这需要监听 window 的 scroll 事件通过 scrollTop 判断滚动距离来切换导航栏类名。这个“滚动变色导航”效果很出彩答辩时老师几乎必问也说明你确实理解了事件监听和类名切换而不是只会堆静态页面。3.3 列表页与详情页的关系卡片式设计列表页的核心就是卡片。景点列表页我做了10张卡片每张卡片由图片、名称、等级标签、简介、阅读量、评论数组成。为了避免卡片内容太呆板我故意让几张卡片的简介文字长度不同然后通过Flex列布局让“查看详情”按钮始终贴底。如果列表页只有图片和文字内容会显得单薄。我额外加了两个模块一是列表页顶部的“筛选栏”用Tab按钮做分类筛选二是列表页底部的“分页器”上一页、当前页码数字、下一页。分页器按钮点击后只是切换了选中样式没有真正的翻页逻辑但视觉上完整度很高。详情页与列表页的联动点在于详情页顶部有“面包屑导航”形如“首页 景点 鼓浪屿”。这是让老师快速理解网站信息架构的一步。详情页主内容区是超宽图片加分段标题文字侧边栏放热门推荐。图片部分我使用了figure和figcaption配合既符合HTML5语义化规范又能给每张图片配一个简短说明。细节提示详情页不要写一面墙的文字。我在鼓浪屿的详情介绍里拆成了“景点概览”“必玩景点”“交通指南”“实用贴士”四个小板块每个板块配一张图文字控制在三到四行。网页设计是“设计”不是“作文”视觉节奏比文字量重要得多。3.4 表单页设计登录注册提升整站完整度登录和注册页是最容易被忽略但实际上很加分的页面。很多期末作业完全没有表单功能而我的注册页有完整的校验逻辑登录页做了记住账号的简单实现。登录页布局采用“居中卡片式”左右两栏左栏是品牌宣传图和一句话右栏是登录表单。表单包括用户名、密码、验证码我用JS随机生成了四位数字验证码“记住我”的勾选框以及登录按钮。验证码功能不算复杂但演示效果极强能体现你确实独立完成了一段逻辑。注册页表单字段更多用户名、手机号、邮箱、密码、确认密码。每个输入框底部都有一条红色或绿色的提示文字在失焦时根据校验结果显示。校验规则function validateUsername(value) { if (value.trim() ) { return 用户名不能为空; } if (value.trim().length 2) { return 用户名至少需要2个字符; } return ; } function validatePhone(value) { const phoneReg /^1[3-9]\d{9}$/; if (!phoneReg.test(value.trim())) { return 请输入正确的11位手机号; } return ; } function validatePassword(value) { if (value.length 6) { return 密码长度不能少于6位; } return ; }登录成功后我用 localStorage 存了一条登录状态然后把页面跳转到首页。虽然不会真的有后台接口但整个过程在演示时是完整的闭环。3.5 成品检查清单14个页面逐项自检14个页面的工作量不小最后阶段最容易出现的情况是这个页面图片没加载出来那个页面导航跳错了。我给自己列了一张检查表逐项打钩这个习惯也可以直接照用。每个页面的导航高亮当前页面在导航栏中应有“选中态”样式。每个页面的标题 title 不同不要14个页面全部叫 index.html。title要体现栏目名如“厦门旅游网-景点详情”。图片能正常显示相对路径有没有写错images文件夹里有没有这张图。内链和站内跳转正确14个页面间至少保证导航栏的9个链接都能跳转到对应页面。表单功能可运行用户名、电话、邮箱、确认密码五组校验全部触发一遍。样式表统一打开页面后用F12确认没有404报错和样式缺失。用不同浏览器打开测试Chrome、Edge、Firefox至少过一遍重点看轮播图和Flex布局是否正常。4. 常见问题与排查技巧实录4.1 轮播图常见坑自动播放失效与切换错乱轮播图是我开发过程中遇到问题最多的组件。第一个坑是自动播放和手动切换冲突点击右侧按钮后setInterval还在继续跑导致刚切到下一张马上又被自动播放切走。解决办法是每次点击按钮后 clearInterval 之前的时间器再重新启动。第二个坑是图片加载后布局抖动因为轮播区域的高度是由图片撑开的不同图片高度不一致导致切换时页面跳动。解决办法是给轮播容器设置固定高度图片用 object-fit: cover 填满不管原图是横版还是竖版都能稳定显示。第三个坑是切换到隐藏的标签页再回来时轮播图可能会出现“连续快进好几张”的现象。这是因为浏览器为了省资源降低了定时器的执行频率。这个问题期末演示时多半不会遇到但如果你在答辩现场切换了浏览器标签页还是可能被眼尖的同学注意到。解决方法是记录“上次执行时间戳”每次执行时判断实际延时超过设定间隔就重置计时而不是机械地累加索引。4.2 常见兼容性Edge、Chrome、Firefox的样式差异不同浏览器对CSS3属性的支持程度并不完全一致。我实测遇到过一个具体问题Firefox在部分旧版本中不支持 backdrop-filter 属性导航栏的毛玻璃效果会直接降级成纯白背景不影响使用但视觉上没那么精致。解决方法是给导航栏设置一层半透明背景色作为 fallback再把 backdrop-filter 加上去浏览器不支持时自动用半透明背景替代。另外Chrome中 input 的自动填充默认会给输入框加上淡蓝色背景在自定义样式的表单中非常突兀。用以下CSS可以强制覆盖input:-webkit-autofill { box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color: #333; }这种方法不属于奇技淫巧而是前端开发中处理浏览器默认样式的标准手段值得在你的项目里出现。4.3 图片与路径的坑本地能显示、部署后不显示这个问题的根源几乎总是“绝对路径 vs 相对路径”。在HTML里写了img src/images/scenic/gulangyu.jpg本地双击打开时根路径是磁盘根目录图片自然显示不出来。解决方法是统一使用相对路径建议这类纯静态项目全部写成images/scenic/gulangyu.jpg去掉了开头的斜杠也就是相对于当前页面所在目录的路径。另外要注意文件名不要带空格和中文比如“厦门 鼓浪屿.jpg”在部分服务器环境或旧浏览器中可能无法正确解析。项目后期我用脚本把所有图片文件名统一重命名成了英文小写加连字号的格式彻底避免了这类问题。如果你也打算部署到Gitee Pages或任意静态托管平台这个检查尤其重要。4.4 页面数量多导致的维护问题统一修改公共部分很痛苦14个页面每页都有导航和Footer如果一开始就把样式写死在每个页面中后期想改一个链接或加一个菜单项需要同时改14个文件非常容易漏掉某个页面。我在项目前期虽然不能靠纯静态include解决但我把公共部分的代码复制到了所有页面后用“全局搜索 替换”的方式统一更新比逐页打开修改高效很多。更实用的一招是先做一个模板页面。比如先完成 scenic.html 作为列表页的标准模板然后通过“另存为”的方式复制出 food.html、guide.html、hotel.html再分别替换内容。这样既保证了公共部分一致又减少重复工作。同样详情页也是先做出 scenic-detail.html 再复制出 food-detail.html 和 guide-detail.html。4.5 浏览器F12排查思路如果在检查中遇到“页面布局乱了”或“某项交互失效”建议按以下顺序排查打开F12开发者工具看 Console 面板有没有红色报错。JS报错会直接导致后续脚本不执行是很多问题的根源。切到 Network 面板刷新页面看有没有404资源。在 Elements 面板检查目标元素的类名有没有被正确添加、样式是否被命中。使用元素选择工具点击页面中的元素右侧排列的CSS规则中被删除线划线的是失效样式重点看哪些样式因为优先级问题被覆盖了。5. 答辩思路与提交要点5.1 老师会问哪些问题怎么答期末答辩的高频问题基本是固定的高频问题推荐回答思路页面布局用了什么技术Flex和Grid做主要布局媒体查询做响应式适配轮播图原理是什么通过JS修改元素的显示状态用setInterval实现自动播放点击按钮时手动切换并重置计时器为什么用语义化标签提高代码可读性、有利于SEO、是HTML5的核心变化之一表单校验怎么实现的JS监听输入框失焦事件用正则表达式匹配格式错误时动态插入提示文字整站有多少个页面分别是什么按“153311”的结构讲解说明每个页面的功能和层级关系5.2 提交材料优化清单除了14个HTML页面本身如果你能额外附上一份 README.md 或设计说明文档会在提交时更有优势。我建议文档里写清楚以下内容项目名称与简介说明这是一个基于HTML5CSS3JS的厦门旅游门户网站。页面清单。列明14个页面的文件名、功能定位。技术亮点。罗列你使用了哪些特性Flex/Grid布局、媒体查询、轮播组件、表单正则校验、滚动变色导航。目录结构说明。让老师知道CSS、JS、图片资源的存放位置。如何在本地运行。说明直接用浏览器打开 index.html 即可无需配置服务器。最后再分享一个我个人的小技巧请在最终提交前用系统自带的“压缩为zip”打包整个项目文件夹并保留目录结构。很多同学只打包了HTML文件没有带images和css文件夹交给老师后整个网站全部“裸奔”图片丢失、样式全乱。这个细节虽然不起眼但能直接影响最终评分印象。这个项目做下来最有成就感的时刻不是把最后一行代码写完而是把全部14个页面在同一个浏览器里逐一点开确认每一页都能正确跳转、图片都加载正常、表单校验稳定生效。前端学习就是这样边做边踩坑踩完一个少一个做完这一个完整项目你对HTML、CSS、JS的理解会明显比单纯看书或敲小demo扎实得多。本文还有配套的精品资源点击获取