项目简介
Touriza 是一套旅游/旅行预订 HTML 模板，提供首页、目的地、行程、博客、团队等十余个完整页面，内置 Swiper 轮播、响应式布局和 jQuery 交互逻辑，适合快速搭建旅游类网站。
技术栈
- HTML5 / CSS3（SCSS 源码 + 编译后 CSS）
- jQuery（主体交互）
- Swiper.js（轮播组件）
- Bootstrap 5（栅格与基础组件）
- Google Fonts（Roboto / Nunito / Inter Tight 等字体）
项目结构
text
tourizahtml-10/
├── touriza-html/ # 模板主目录
│ ├── assets/
│ │ ├── css/style.css # 编译后的完整样式
│ │ ├── scss/ # SCSS 源码（可自定义变量）
│ │ └── js/main.js # 所有页面共用的交互脚本
│ ├── index.html # 首页（第 1 种）
│ ├── index-two.html # 首页（第 2 种）
│ ├── index-three.html # 首页（第 3 种）
│ ├── index-four.html # 首页（第 4 种）
│ ├── index-five.html # 首页（第 5 种）
│ ├── index-six.html # 首页（第 6 种）
│ ├── index-seven.html # 首页（第 7 种）
│ ├── index-eight.html # 首页（第 8 种）
│ ├── index-nine.html # 首页（第 9 种）
│ ├── about.html # 关于我们
│ ├── destination.html # 目的地列表
│ ├── destination-details.html
│ ├── tour.html # 行程列表
│ ├── tour-details.html
│ ├── blog.html # 博客列表
│ ├── blog-details.html
│ ├── contact.html # 联系页面
│ └── team.html # 团队页面
└── touriza-documentation/ # 官方文档站点
└── index.html
核心文件说明
touriza-html/index.html— 首页入口，展示了 banner、热门目的地、特色行程等典型旅游板块touriza-html/assets/js/main.js— 全部交互逻辑，包含 Swiper 初始化、smoothscroll、stickyheader、back-to-top 等 16 个功能模块touriza-html/assets/scss/style.css— SCSS 源码入口，定义了颜色变量、响应式断点、组件样式；主 CSS 通过assets/css/style.css加载touriza-html/assets/css/style.css— 编译后完整 CSS，定义了--color-primary: #BA6827等主题色变量touriza-html/destination.html— 目的地列表页，含筛选/搜索交互touriza-html/contact.html— 联系页面，含表单与地图占位
快速开始
bash
# 直接在浏览器打开首页
open touriza-html/index.html
# 或启动任意静态服务器
npx serve touriza-html
使用建议
- 正式项目应使用 SCSS 源码（
scss/style.css）修改全局颜色和字体，便于主题切换；若只做小改可直接编辑assets/css/style.css中的 CSS 变量。 - 模板附带了 9 种首页变体，建议根据实际业务选择其一作为入口，避免冗余代码。
