本项目是一个面向初学者的完整前端实践案例，采用语义化HTML5结构、现代CSS3布局及轻量级JavaScript交互，构建一套包含首页、资讯页、票务页、风光页和公司介绍页共5个页面的旅行社官网。整体风格以深灰为主色调，强调视觉层次与内容可读性，兼顾移动端适配与跨浏览器兼容性。

核心设计原则

• 语义化结构：使用<header>、<nav>、<section>、<figure>等HTML5语义标签替代通用<div>，提升代码可维护性与SEO友好度
• 响应式布局：通过媒体查询与弹性单位（rem/vw）实现多端适配，小屏设备自动折叠导航菜单并切换为触控优化样式
• 性能优先：所有图片均采用WebP格式并预设宽高属性，CSS关键样式内联，避免渲染阻塞
• 无障碍支持：为图标添加aria-label，表单控件绑定label，焦点状态提供清晰视觉反馈

技术实现亮点

首页轮播模块采用纯CSS动画+JavaScript控制逻辑，摒弃第三方库依赖：

<!-- 轮播容器 -->
<div class="carousel" id="mainCarousel">
  <div class="carousel-track">
    <div class="carousel-slide active"><img src="assets/banner-1.webp" alt="敦煌莫高窟全景"></div>
    <div class="carousel-slide"><img src="assets/banner-2.webp" alt="九寨沟秋季风光"></div>
    <div class="carousel-slide"><img src="assets/banner-3.webp" alt="黄山云海日出"></div>
  </div>
  <button class="carousel-btn prev" aria-label="上一张">&#10094;</button>
  <button class="carousel-btn next" aria-label="下一张">&#10095;</button>
  <div class="carousel-indicators">
    <button class="indicator active" data-index="0" aria-label="查看第1张"></button>
    <button class="indicator" data-index="1" aria-label="查看第2张"></button>
    <button class="indicator" data-index="2" aria-label="查看第3张"></button>
  </div>
</div>

/* 轮播基础样式 */
.carousel {
  position: relative;
  overflow: hidden;
  height: 480px;
}
.carousel-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  height: 100%;
}
.carousel-slide {
  min-width: 100%;
  height: 100%;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
}
.carousel-btn.prev { left: 20px; }
.carousel-btn.next { right: 20px; }
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.indicator.active {
  background: #fff;
  transform: scale(1.3);
}

// 轮播控制脚本
class TravelCarousel {
  constructor(container) {
    this.container = container;
    this.track = container.querySelector('.carousel-track');
    this.slides = Array.from(container.querySelectorAll('.carousel-slide'));
    this.indicators = Array.from(container.querySelectorAll('.indicator'));
    this.currentIndex = 0;
    this.init();
  }

  init() {
    this.bindEvents();
    this.startAutoPlay();
  }

  bindEvents() {
    this.container.querySelector('.prev').addEventListener('click', () => this.prev());
    this.container.querySelector('.next').addEventListener('click', () => this.next());
    this.indicators.forEach((btn, i) => 
      btn.addEventListener('click', () => this.goTo(i))
    );
  }

  goTo(index) {
    this.updateSlide(index);
  }

  next() {
    const nextIndex = (this.currentIndex + 1) % this.slides.length;
    this.updateSlide(nextIndex);
  }

  prev() {
    const prevIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    this.updateSlide(prevIndex);
  }

  updateSlide(index) {
    this.slides.forEach(slide => slide.classList.remove('active'));
    this.indicators.forEach(btn => btn.classList.remove('active'));
    
    this.slides[index].classList.add('active');
    this.indicators[index].classList.add('active');
    this.track.style.transform = `translateX(-${index * 100}%)`;
    this.currentIndex = index;
  }

  startAutoPlay() {
    this.autoTimer = setInterval(() => this.next(), 5000);
  }
}

// 初始化轮播
document.addEventListener('DOMContentLoaded', () => {
  const carouselEl = document.getElementById('mainCarousel');
  if (carouselEl) new TravelCarousel(carouselEl);
});

导航系统设计

采用渐进增强策略：桌面端显示完整菜单，移动端通过汉堡图标触发侧滑导航。CSS中使用@media (max-width: 768px)定义断点，并利用transform: translateX()实现平滑过渡效果。

表单交互优化

联系页面集成验证逻辑：邮箱格式校验、必填字段标记、提交后禁用按钮防止重复提交。所有表单元素均设置required属性，并配合:valid/:invalid伪类提供实时反馈。

文件组织结构

travel-site/
├── index.html          # 首页
├── pages/
│   ├── news.html         # 旅游资讯
│   ├── booking.html      # 票务服务
│   ├── gallery.html      # 风光图集
│   └── about.html        # 公司简介
├── assets/
│   ├── css/
│   │   └── main.css        # 主样式表（含重置、布局、组件）
│   ├── js/
│   │   └── main.js         # 模块化脚本（轮播/表单/导航）
│   └── images/
│       ├── banner-*.webp   # 轮播图（WebP格式）
│       └── tour-*.jpg      # 旅游产品缩略图（带尺寸裁剪）
└── favicon.ico

所有HTML文件共享同一套CSS与JS资源，通过相对路径引用，确保资源加载一致性。CSS采用BEM命名规范，JavaScript按功能模块拆分，便于后期扩展维护。