用HTML+CSS+JavaScript打造中山旅游网站：前端期末作业全流程解析-代码聚汇网

期末作业选来选去，最后还是做了个旅游网站。说实话，这个题目在大学生HTML大作业里属于“常青树”，牛客上搜一下，十个前端期末题起码一半都是旅游、美食、个人主页。但正因为做的人多，反而特别容易做出流水线感。所以这篇就围绕我用HTML+CSS+JavaScript写中山旅游网站的全过程，把从选题拆解、结构设计、布局方式到交互实现和踩坑经历一次讲清楚。不管你最后是直接交这个方向，还是想借鉴思路做自己城市的版本，这篇应该都能省下你不少瞎琢磨的时间。

1. 为什么期末大作业我选了旅游网站：选题思路与站点规划

先说选题。很多同学期末作业最常见的纠结是“做什么题目才显得有技术含量”，结果有的人去做仿电商、仿后台管理，做到一半发现CSS样式调不完，JS逻辑又绕不回来，最后草草提交。旅游网站这个选题的优势在于：内容展示天然依赖图片和排版，能充分体现CSS功底；交互场景丰富但难度可控，轮播图、点击切换、表单验证、返回顶部都是JavaScript的经典入门应用；素材来源特别广，景点照片、美食照片一找一大把；最重要的是页面结构规整，逻辑清晰，评委一眼能看出你“会规划”。

再谈区域选择。我选的是中山，为什么不是广州深圳这种大热门？一是越大的城市景点越分散，信息架构反而难做，二线城市景点数量适中，三四天的行程安排做出来比较真实；二是评审老师看腻了“北京五日游”“上海自由行”这种标准答案，换个小众目的地反而有记忆点。当然最实际的原因是，中山的景点结构特别适合用来练习页面分类——人文历史、自然风光、美食探店、行程推荐，四个维度刚好对应四个子页面，信息层级清清楚楚。

拿到题目之后别急着写代码，先花二十分钟把站点地图画出来。我的规划是：

首页（index.html）：城市整体印象展示，导航+主视觉轮播+精选景点卡片+美食推荐+页脚。
景点页（scenery.html）：集中展示中山主要景点的图文列表，带分类筛选。
美食页（food.html）：以卡片网格展示地道小吃与老字号。
行程页（travel.html）：给出三天两夜的具体行程方案，用时间线的方式呈现。
关于页（about.html）：简单介绍这个站点的设计意图，顺便放网站调研和一页式自我说明。

这五个页面对应了一个完整的“展示型网站”闭环，既不像单页作品那样单薄，也没有贪多到做八九个页面把自己耗死。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 中山旅游页面的信息架构与HTML骨架搭建

定好页面数量之后，下一步是搭HTML骨架。这里要给一个特别实际的建议：永远先用“纯结构”把页面写出来，再去填样式和脚本。很多同学一上来就边写CSS边想结构，结果就是类名乱飞、标签嵌套混乱，后面越调越崩。

HTML骨架的核心并不复杂，关键在语义化。我以首页为例，标准结构是：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中山印象 - 遇见岭南慢生活</title>
  <meta name="description" content="中山旅游攻略，带你走进孙中山故里，品味地道美食与岭南文化。">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- 导航区：全站统一 -->
  <header class="site-header">
    <div class="container nav-wrapper">
      <div class="logo">
        <a href="index.html">中山印象</a>
      </div>
      <nav class="main-nav">
        <ul>
          <li class="active"><a href="index.html">首页</a></li>
          <li><a href="scenery.html">景点</a></li>
          <li><a href="food.html">美食</a></li>
          <li><a href="travel.html">行程</a></li>
          <li><a href="about.html">关于</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- 主体内容区 -->
  <main>
    <!-- 轮播区 -->
    <section class="banner">
      <div class="banner-slider">
        <div class="slide active">
          <img src="images/banner1.jpg" alt="孙中山故里旅游区">
          <div class="slide-caption">
            <h2>伟人故里，岭南名城</h2>
            <p>走进中山，感受历史与自然的交融</p>
          </div>
        </div>
        <!-- 更多slide... -->
      </div>
      <!-- 轮播按钮和指示器 -->
      <button class="banner-prev">&#10094;</button>
      <button class="banner-next">&#10095;</button>
      <ul class="banner-dots"></ul>
    </section>

    <!-- 精选景点 -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">精选景点</h2>
        <div class="card-grid">
          <!-- 卡片由JS动态渲染，也可以静态写死 -->
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="site-footer">
    <div class="container">
      <p>中山印象 - 大学生HTML期末大作业</p>
      <p class="footer-links">
        <a href="about.html">关于本站</a>
      </p>
    </div>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>

这段代码里面有几个平时作业容易忽略但值得注意的细节：

第一，lang="zh-cn"一定要写。 别小看一个属性，它影响浏览器默认字体渲染和朗读工具的语言选择。有些同学的页面中文显示出来有点“发虚”，可能不是CSS问题，而是这个属性没设置。

第二，meta name="description"建议写上。 期末作业虽然不会真的上搜索引擎，但老师在评审时如果看到这个标签，通常会认为你具备基本SEO意识，属于加分细节。

第三，导航栏用header + nav语义标签包裹。 之前见过不少作业用一串div硬拼导航，不是说不行，但直接用语义化标签结构更清晰，也方便后续写CSS选择器。

第四，main标签每个页面只能有一个。 有人会在多个板块都套main，这是不对的。main表示页面的主要内容区，全页唯一。

第五，轮播区域的操作按钮要放在轮播容器内部，不是外部。 这个看起来是小问题，但实际上直接决定你用absolute定位时相对父容器是谁。

景点页、美食页、行程页的结构大同小异，只是每个页面的main里侧重点不同。景点页需要预先规划好卡片结构，每张卡片包含图片区、文字区和标签区：

html复制<article class="spot-card">
  <div class="card-img">
    <img src="images/zhan-yuan.jpg" alt="詹园">
    <span class="card-tag">岭南园林</span>
  </div>
  <div class="card-body">
    <h3>詹园</h3>
    <p class="card-desc">中山最大的私家园林，融合古典建筑与江南水乡意境。</p>
    <div class="card-meta">
      <span class="rating">★★★★☆</span>
      <span class="duration">建议游玩2小时</span>
    </div>
    <a href="#" class="btn-detail">查看详情</a>
  </div>
</article>

这里要注意article标签的运用。卡片这种整体含义独立、可以脱离上下文存在的内容块，用article比div更合适。期末答辩时老师如果问“为什么用article”，你可以解释“语义化标签有助于SEO和屏幕阅读器理解页面结构”，这比背一大段概念有用得多。

关于页面结构，我想多说一句：HTML骨架不要追求一次到位，先按“导航-主体-页脚”三段式搭好，再往主体里填充板块，板块之间用section隔开，每个section里用一个h2作为板块标题。这样写出来的页面，就算CSS一个字没写，用浏览器打开也能看出这是个结构完整的网站，而不是一堆散落的内容。

3. 用Flex和Grid撑起页面：CSS布局与视觉设计的实操方案

HTML骨架搭好之后，CSS是最耗时间但也最能拉开差距的部分。我这里重点讲两个东西：一是怎么用Flex布局解决常见的卡片自适应问题；二是怎么给页面定一个“不翻车”的视觉基调。

3.1 Flex布局的核心口诀：容器管排列，项目管伸缩

期末作业里最常见的布局需求就是“一排卡片，屏幕大小变化时自动换行并且宽度自适应”。很多同学一上来就写display: flex，然后每个卡片用flex: 1，结果发现屏幕宽的时候卡片被拉得特别宽，窄的时候又被挤得变形。问题出在只设置了flex-grow，没有设置flex-basis。

正确的做法是给卡片设一个合理的“理想宽度”，让Flex在理想宽度的基础上伸缩。以每行四列、间距20px为例：

css复制.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card-grid .card {
  flex: 1 1 calc(25% - 20px);
  /* 等价于：flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 20px); */
  max-width: calc(25% - 20px);
  min-width: 260px;
}

拆开解释一下这三个属性：

flex-grow: 1表示当容器有剩余空间时，卡片可以放大。
flex-shrink: 1表示当容器空间不足时，卡片可以缩小。
flex-basis: calc(25% - 20px)表示在伸缩之前的理想宽度是25%减去间距。

gap属性代替了传统的margin方案，省去了给每一列单独设margin的麻烦。min-width: 260px则是一个保险丝：当屏幕宽度小于约1100px时，卡片不会无限缩小下去，而是换到下一行，这样在笔记本上也依然好看。

这里有另一个要点：flex: 1 1 calc(25% - 20px)中的calc(25% - 20px)为什么是减去20px？因为gap: 20px是写在容器上的，四列卡片之间有3个间隔，共60px，但Flex布局中flex-basis计算的是每个项目在main axis上的初始长度，而gap本身不参与flex-basis的分配。所以更精确的写法其实是calc((100% - 60px) / 4)，但对于四列卡片，如果父容器是1200px宽，则calc(25% - 20px)等于280px，四张卡加上三个20px间隔，总共铺满：280×4+60=1180px，还差一点。这时flex-grow: 1会把剩余空间均匀分给四项，所以效果是等宽的。实际用下来，calc(25% - 20px)配合flex-grow就能达到每行四列的均匀分布，不用纠结那几像素的误差。

3.2 Grid布局：适合“既有头部又有侧栏”的页面框架

Flex适合一维排列，Grid适合二维布局。行程页我用Grid做了一个主区域加侧边栏的经典框架：

css复制.travel-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
}

@media (max-width: 900px) {
  .travel-layout {
    grid-template-columns: 1fr;
  }
}

主内容区是1fr，侧边栏固定320px。当屏幕宽度缩到900px以下时，侧边栏自动掉到主内容下方。这套写法非常省心，不需要去算百分比，也不用写一堆float和clear。

3.3 视觉基调定调：先选主色，再定辅助色，最后才调字体

期末作业最容易翻车的不是功能，而是配色。一旦用上高饱和的荧光绿配大红，基本就告别高分了。这里分享一个我屡试不爽的“旅游网站定色法”：

主色调：从目的地最有代表性的自然色彩里选。中山的标签是“岭南”“水乡”“骑楼”，所以我用了灰绿色做为主色（#3a5f56），配合米白背景（#faf8f5），这两个颜色放在一起就有一种安静、自然的感觉。
辅助色：选一个暖色做强调。我用了砖红色（#b85c3c），用在按钮、标签、价格等需要吸引视线的元素上。
文字色：正文用深灰而不是纯黑（#2b2b2b），说明文字用中灰（#555555）。
字体：正文用系统中文字体栈：

css复制body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

这套字体栈的好处是利用了系统自带字体，页面加载更快，在Windows和macOS上都能有良好的中文显示效果。不要随便引入外部字体库，期末作业的网络环境不可控，万一加载不出来反而难看。

页面整体宽度建议设定一个最大宽度并居中：

css复制.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

这样不管显示器多大，内容都不会被拉得很散。同时导航栏可以用position: sticky; top: 0;固定在顶部，滚动时导航不消失，这个效果实现成本极低但很能提升整体质感：

css复制.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

position: sticky是CSS里被低估的好用属性，它不像fixed那样完全脱离文档流，而是“滚动到顶部时吸住”，实现导航悬停根本不需要JavaScript。配合一点半透明背景和模糊效果，整个导航的高级感立即就出来了。这里的backdrop-filter: blur(8px)能让导航栏下滚时的背景虚化，现代浏览器基本都支持。

3.4 卡片阴影与圆角：用细节掩盖“学生感”

很多学生作品一眼假，不是因为技术不行，而是细节粗糙。比如卡片没有任何阴影，图片直接贴边，按钮棱角分明。下面是我给景点卡片设置的样式，这些数值没有统一标准，但经过实测比较耐看：

css复制.spot-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spot-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

初次进入页面就带阴影，hover时卡片轻微上浮并加深阴影，这种效果几乎不需要额外成本，但能让整个页面“活”起来。至于为什么hover时用translateY(-6px)而不是直接改margin-top，是因为transform不会触发重排，性能更好，动画也更流畅。

3.5 响应式断点：不用做太细，但基础的三档必须有

期末作业不用面面俱到做十几个断点，但至少保证桌面、平板、手机三个阶段不出现错位。我用的断点是：

断点	适用设备	布局变化
`> 1100px`	桌面	四列卡片正常展示
`768px - 1100px`	平板	卡片变为两列
`< 768px`	手机	卡片变为单列，导航收起为简易菜单

两列和单列的切换代码：

css复制@media (max-width: 1100px) {
  .card-grid .card {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .card-grid .card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

导航在手机端的处理，最简单的方式是隐藏横向菜单，只保留Logo和首页链接。虽然不够“完整”，但至少不会出现手机端文字叠在一起的灾难现场。

4. 三个高频交互功能的JavaScript实现细节

旅游网站的JavaScript不需要堆砌功能，期末作业里做好三件事就非常够看：轮播图、返回顶部、表单验证。如果还想加点分，可以做滚动渐入动画。下面把每个功能的实现思路和关键代码说清楚。

4.1 轮播图：核心不是动画，是“状态管理”

轮播图是旅游网站的门面，几乎每个评审老师都会先看这块。很多教程会教你写一个几百行的轮播插件，其实期末作业真没必要。关键就三点：当前显示第几张、点击按钮后怎么切换、自动播放怎么和手动操作共存。

我用的轮播图结构是：

html复制<div class="banner-slider">
  <div class="slide active">
    <img src="images/banner1.jpg" alt="景点一">
  </div>
  <div class="slide">
    <img src="images/banner2.jpg" alt="景点二">
  </div>
  <div class="slide">
    <img src="images/banner3.jpg" alt="景点三">
  </div>
</div>

CSS里把所有slide叠放在一起，只有.actived的显示：

css复制.banner {
  position: relative;
  height: 460px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

JavaScript的核心是一个currentIndex变量：

javascript复制const slides = document.querySelectorAll('.slide');
const dotsWrap = document.querySelector('.banner-dots');
let currentIndex = 0;
let timer = null;

// 生成指示器小圆点
slides.forEach((_, i) => {
  const dot = document.createElement('li');
  dot.addEventListener('click', () => goToSlide(i));
  dotsWrap.appendChild(dot);
});

function goToSlide(index) {
  slides[currentIndex].classList.remove('active');
  dotsWrap.children[currentIndex].classList.remove('active');
  currentIndex = (index + slides.length) % slides.length;
  slides[currentIndex].classList.add('active');
  dotsWrap.children[currentIndex].classList.add('active');
}

function nextSlide() {
  goToSlide(currentIndex + 1);
}

function prevSlide() {
  goToSlide(currentIndex - 1);
}

document.querySelector('.banner-next').addEventListener('click', () => {
  nextSlide();
  restartAutoPlay();
});

document.querySelector('.banner-prev').addEventListener('click', () => {
  prevSlide();
  restartAutoPlay();
});

function startAutoPlay() {
  timer = setInterval(nextSlide, 4000);
}

function restartAutoPlay() {
  clearInterval(timer);
  startAutoPlay();
}

startAutoPlay();

这段代码里有几个容易踩坑的点，单独说：

(index + slides.length) % slides.length这行是循环切换的精髓。 当index为-1时，加上slides.length再取模，就跳到了最后一张；当index等于slides.length时，取模回到0。不写这行，到最后一张再点“下一张”就会直接报错。
手动点击后要clearInterval再重新setInterval。 否则会出现“点击一次之后自动播放速度变快”的诡异现象，本质是多个定时器叠加了。
inset: 0是top/right/bottom/left四个属性的简写。 有些浏览器版本比较老可能不支持，保险起见可以写成top:0; left:0; width:100%; height:100%。

4.2 返回顶部：别用`scrollTop`硬跳，用`requestAnimationFrame`做平滑滚动

返回顶部按钮是一个成本极低但很实用的功能。很多同学直接写window.scrollTo(0, 0)，功能没错，但体感生硬。我用CSS的scroll-behavior: smooth加JavaScript控制显隐，效果就很自然：

先在CSS里设置：

css复制html {
  scroll-behavior: smooth;
}

然后页面里放一个按钮：

html复制<button id="backToTop" class="back-to-top" aria-label="返回顶部">↑</button>

JavaScript只负责控制按钮“什么时候出现”：

javascript复制const backToTop = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY || document.documentElement.scrollTop;
  if (scrollY > 600) {
    backToTop.classList.add('show');
  } else {
    backToTop.classList.remove('show');
  }
});

backToTop.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

window.scrollY和document.documentElement.scrollTop在兼容性上有细微差异，保险做法是两者取或。这里不需要自己写requestAnimationFrame做动画，behavior: 'smooth'已经帮你处理了。但要注意，scroll-behavior设置html和body的差异在某些老旧浏览器上可能有兼容问题，所以在JS里显式传behavior: 'smooth'是双保险。

按钮的CSS有一个细节，就是初始状态用opacity: 0; visibility: hidden;，配合.show类控制显示。很多人会忽略visibility: hidden，只用opacity: 0，结果按钮虽然透明了但还在原地占位，还可能拦截到鼠标点击事件。

css复制.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #3a5f56;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

4.3 表单验证：正则表达式和提示信息要做到位

网站里有“留言”“建议”之类表单时，JavaScript表单验证几乎是老师必看的点。我做了个简单的“行程咨询”表单，包含姓名、手机号和出行日期三个字段。验证逻辑很简单：不能为空、手机号要匹配位数和开头。

核心HTML：

html复制<form id="contactForm" novalidate>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="phone">手机号</label>
    <input type="tel" id="phone" name="phone" placeholder="11位手机号码">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="date">出行日期</label>
    <input type="date" id="date" name="date">
    <span class="error-msg"></span>
  </div>
  <button type="submit">提交咨询</button>
</form>

novalidate属性很重要，它告诉浏览器“不在前端做默认校验，让我自己控制”。

javascript复制const form = document.getElementById('contactForm');
const nameInput = document.getElementById('name');
const phoneInput = document.getElementById('phone');

function showError(input, message) {
  const formGroup = input.closest('.form-group');
  const errorEl = formGroup.querySelector('.error-msg');
  errorEl.textContent = message;
  formGroup.classList.add('has-error');
}

function clearError(input) {
  const formGroup = input.closest('.form-group');
  const errorEl = formGroup.querySelector('.error-msg');
  errorEl.textContent = '';
  formGroup.classList.remove('has-error');
}

function validateName() {
  const value = nameInput.value.trim();
  if (!value) {
    showError(nameInput, '请输入姓名');
    return false;
  }
  if (value.length < 2) {
    showError(nameInput, '姓名至少2个字符');
    return false;
  }
  clearError(nameInput);
  return true;
}

function validatePhone() {
  const value = phoneInput.value.trim();
  const phoneReg = /^1[3-9]\d{9}$/;
  if (!value) {
    showError(phoneInput, '请输入手机号');
    return false;
  }
  if (!phoneReg.test(value)) {
    showError(phoneInput, '请输入正确的11位手机号');
    return false;
  }
  clearError(phoneInput);
  return true;
}

nameInput.addEventListener('blur', validateName);
phoneInput.addEventListener('blur', validatePhone);

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const isNameValid = validateName();
  const isPhoneValid = validatePhone();
  const dateValue = document.getElementById('date').value;

  if (!dateValue) {
    showError(document.getElementById('date'), '请选择出行日期');
    return;
  }

  if (isNameValid && isPhoneValid && dateValue) {
    // 模拟提交成功
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = '提交成功，我们会尽快联系您！';
    document.body.appendChild(toast);
    form.reset();
    setTimeout(() => toast.remove(), 3000);
  }
});

正则/^1[3-9]\d{9}$/里面每个字符都值得解释一下：^1表示以数字1开头；[3-9]表示第二位是3到9之间的数字；\d{9}表示后面紧跟9个数字；$表示字符串结束。加起来就是11位、以1开头、第二位为3到9的手机号。这是一个非常经典且够用的手机号正则，期末答辩时如果老师问你这是干什么的，你可以非常自信地把这一段拆开讲。

需要注意：showError和clearError里都用了closest('.form-group')来找到最近的父级容器，这样就不用在HTML里为每个错误提示单独绑定ID了，代码更简洁。错误提示的样式红字加边框就够醒目：

css复制.form-group.has-error input {
  border-color: #d9534f;
}
.error-msg {
  color: #d9534f;
  font-size: 13px;
  min-height: 18px;
  display: block;
  margin-top: 4px;
}

4.4 滚动渐入动画：用IntersectionObserver给网页加“呼吸感”

如果上面三个功能都做完了还有余力，我强烈推荐加一个“滚动到元素进入视野时淡入上滑”的效果。这个动画非常出效果，而且代码量不大。

原理是浏览器原生提供的IntersectionObserver，它可以监听某个元素是否进入了视口。当元素从视口外进入视口内时，就给它添加一个类名触发CSS过渡。相比传统的scroll监听+getBoundingClientRect计算，IntersectionObserver性能更好，代码也更简洁。

javascript复制const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.15
});

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

CSS侧的处理：

css复制.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

这里有几个细节值得注意：

unobserve意味着元素一旦出现并动画完成后就不再被监听，避免重复触发。
threshold: 0.15表示元素被露出15%时触发。数值太小容易一闪就触发，太大则滚动到很下方才动画，0.15到0.2之间的值体感比较舒适。
transition要写在基础类上而不是.visible上，这样从无到有的过程才有过渡动画。
如果页面一开始就有一部分元素在首屏可见，在JS加载完成之前它们会被隐藏（opacity为0）。所以对于首屏元素，要么直接在HTML上加visible类，要么先渲染再observe。一个常用的解决方法是JS执行时先判断元素的位置，同步调用回调。

5. 期末作业最容易踩的六个坑与排查思路

这部分整理的是我在制作过程中自己踩过、以及经常在帮同学改作业时遇到的坑。这些坑都很典型，但谷歌搜出来的答案往往方向不对，我直接把我排查后确认有效的方案写出来。

5.1 图片本地预览总是裂开：路径和文件名的问题

用浏览器直接双击打开index.html时，发现页面里的图片加载不出来，但代码看起来没错。排查思路第一步：F12打开开发者工具，切到Console和Network面板，看图片请求的路径是什么、返回什么状态。

最常见的问题有两个：

路径写错。比如把图片放在images文件夹里，却写成了img/banner1.jpg，或者使用了./images/../images这种相对路径找不到目标。
文件名大小写不匹配。Banner1.jpg和banner1.jpg在Linux服务器上完全是两个文件，虽然Windows本地不区分大小写能显示，但上传到某些服务器或部署时就会出问题。即使期末作业不上服务器，养成统一小写命名的习惯也是对的。

还有一个容易被忽略的问题：如果你用了file://协议直接打开页面，某些浏览器会因为安全策略限制JavaScript读取本地文件。比如用fetch读取同目录的JSON数据会直接报CORS错误，这是浏览器安全策略导致的，不是你代码的问题。期末答辩最好用Live Server这类本地服务器插件打开页面，顺便还能实现保存后自动刷新。

5.2 导航栏吸顶后遮挡页面内容

设置了position: sticky后，往下滚动时导航栏会吸在顶部，这是预期效果。但你会发现，滚动到锚点位置时，目标标题有一部分被导航栏挡住了。因为scroll-behavior: smooth做的是原生滚动，滚动到锚点时会直接定位到元素顶部，而元素顶部贴着视口顶部时，正好被fixed的导航栏遮住。

解决方案是给被锚点的目标元素加一个scroll-margin-top：

css复制.section {
  scroll-margin-top: 80px;
}

80px约等于导航栏高度加上一点余量。以后再做类似吸顶导航加锚点跳转，直接把这条写进CSS里。

5.3 所有页面导航高亮不同步

我一开始写导航时，在每个页面里手工把当前页对应的li加上class="active"。后来景点页改结构时忘了同步，结果页面在导航里“不认识自己”。这种情况下检查问题不难，但修起来麻烦。

更省事的做法是用JavaScript统一处理：页面加载后，把当前页面的文件名和导航链接的href比对，自动给匹配项加高亮：

javascript复制const currentPage = location.pathname.split('/').pop() || 'index.html';
document.querySelectorAll('.main-nav a').forEach(link => {
  const linkPage = link.getAttribute('href');
  if (linkPage === currentPage) {
    link.parentElement.classList.add('active');
  }
});

这样就不用每个页面手动维护高亮状态了，以后增删页面也不容易漏。

5.4 字体图标加载不出来

很多同学喜欢用Font Awesome或者iconfont等图标库，往页面里引入一大堆<link>和<script>，结果答辩现场没网，图标全变成了方框。这个风险在期末作业场景下尤其致命——教室的WiFi一波三折，你总不能在最关键的时候说“老师，那个是图标没加载出来”。

我的建议是：能不用图标库就不用图标库，需要用到的几个小图标尽量用Unicode字符或CSS实现。比如上一张、下一张用❮和❯，星级评分直接用★和☆，这些字符天然存在于字体里，不依赖外部资源。如果非要图标库，记得把图标文件下载到本地并用相对路径引用，不要用CDN的绝对链接。

5.5 JavaScript报错导致整个互动功能失效

遇到“轮播图点不动”“按钮没反应”的情况，90%是JavaScript运行时报错，脚本直接中断了。最直接的排查方式：打开控制台看红字。

常见报错有这么几类：

Cannot read property 'addEventListener' of null：说明你获取DOM元素的时机太早，元素还没渲染完。解决：把<script>放到</body>之前，或者用DOMContentLoaded事件包裹。
Cannot set property 'innerHTML' of null：同上，也是DOM没找到。
Uncaught TypeError: slides.forEach is not a function：querySelectorAll返回的是NodeList，在旧浏览器里NodeList没有forEach方法。可以改用Array.from(slides).forEach()或者[...slides].forEach()先转成数组。
Unexpected token '<'：说明你的JS文件被当成了HTML解析，通常是把<script>标签写错了闭合位置，或者JS文件路径返回的是404页面。

第五个错误是我见过最容易让人懵的。它在控制台显示的红色信息是Uncaught SyntaxError: Unexpected token '<'，看起来像语法错误，其实是你引用的main.js路径404了，浏览器加载失败后把返回的404页面当成JS解析。排查时直接看Network面板，看JS文件的响应状态是不是200。

5.6 CSS样式“不生效”但代码看起来没问题

这是特别普遍的一种情况：自己写的样式没生效，检查了半天不知道该改哪。排查思路按照以下顺序：

选择器没有匹配到元素。用F12的Elements面板选中目标元素，看右侧的Styles里有没有你写的CSS规则。
被更高优先级的选择器覆盖了。比如你用.card设置背景色，但前面有.container .card也设置了背景色，后者因为优先级更高抢赢了。少用ID选择器，多用类选择器，大类名只用来标记语义，样式挂在小类名上。
CSS文件中使用的属性写错了花括号导致后面全部失效。比如某个选择器少写了一个}，浏览器会把后面的规则全部“吞掉”，导致成片样式消失。用编辑器的格式化功能能很快发现。
标签被默认样式或重置样式改变了。比如ul默认带padding-left，你直接设list-style: none但忘记重置padding，结果导航项目就是偏右。解决：在CSS开头写一个简单的reset。

css复制* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

最后一条display: block解决了图片底部出现一句“多余的缝隙”的问题。这个缝隙其实是图片作为inline元素时与文字基线对齐产生的空白，业界通用解法就是让图片变成块级元素。

5.7 表格样式在手机端被撑破

如果行程页或对比表格用了table标签，在窄屏下很容易被撑破。一个最简单有效的方案是把表格包在overflow-x: auto容器里：

html复制<div class="table-wrapper">
  <table>...</table>
</div>

css复制.table-wrapper {
  overflow-x: auto;
}

这样手机端可以横向滑动查看表格，而不破坏整页布局。虽然不算完美的“响应式表格”，但期末作业完全够用。

6. 答辩现场常问的问题与后续优化空间

期末作业交了代码还不够，大概率还要上台展示加答辩。这一节把我遇到的、以及身边同学被问到的问题整理成清单，每个问题都附上回答思路。

6.1 为什么选择这个主题/这个城市？

不要光说“因为中山是孙中山故里”就结束，要说清楚你的信息架构。我是这样回答的：“中山的旅游资源结构清晰，有人文历史、自然生态和美食体验三条线。这让我可以自然地划分出四个子页面，每个页面承担不同的展示功能，同时通过统一的导航串联成一个完整的体验流程。”这样就既讲了内容也讲了设计逻辑。

6.2 轮播图为什么用定时器实现，会不会有问题？

这是一个技术细节问题。回答点可以很明确：我用setInterval实现自动轮播，配合clearInterval防止手动切换与自动播放冲突。你可能觉得应该被问“为什么不用CSS动画”，但真正值得强调的是：我理解手动操作后要重置定时器，这才是理解问题本质的地方。

6.3 网站是自适应布局吗？怎么实现的？

回答模板：站点采用了Flex和Grid两套布局方案，卡片区域使用Flex的flex-wrap配合flex-basis实现自适应换行；行程页利用Grid的1fr 320px创建主体加侧边栏结构，并用媒体查询在窗口缩小时叠加响应式布局。图片宽度设置为100%，在容器缩放时自然适配。如果老师再追问，可以说“在宽于1100px、768到1100px、窄于768px三个区间分别测试过，能正常展示”。

6.4 为什么不用Bootstrap？

只要你能把理由说清楚，这个问题反而能给答辩加分。参考回答：“Bootstrap确实能快速搭建页面，但期末作业的目的在于检验对HTML、CSS和JavaScript基础的理解。采用手写Flex、Grid和媒体查询，能更完整地展现我对CSS布局原理的掌握。此外，手写样式可以更精确地实现我想要的视觉风格，不会被框架默认样式束缚。”

6.5 你还想怎么优化这个网站？

这个问题提前想好两三个方向就够了，可以快速说：

引入Vue或React做数据驱动渲染，景点数据单独抽成一个数组，点击分类按钮时动态渲染列表，避免重复写HTML。
接入地图API，在景点页嵌入地图，增强展示效果。
接入后端或本地存储，把表单提交的记录保存起来，做一个简单的留言板。
做页面性能优化：图片懒加载、压缩图片体积、合并CSS和JS文件。

注意，不要说“我想做在线支付”“想做拼团购票”这种明显超出项目体量的话，会让老师觉得你目标不清晰。优化方向要克制，能自圆其说即可。

如果还有时间，我建议把这个项目稍微扩展一下做成“城市系列”。把CSS里的颜色变量提取出来，把图片路径整理成配置数组，把景点数据JSON化，这样下次换一个城市就能快速套用。这套做法不仅让期末作品显得更有规划，也顺便让你提前接触了“数据与视图分离”的思想，对后续学框架非常有帮助。写到这儿我突然想到，其实你拿去改造成自己家乡的旅游网站，也就是几个小时的事。

用HTML+CSS+JavaScript打造中山旅游网站：前端期末作业全流程解析