Touriza – Travel Booking HTML Template

# 项目简介 Touriza 是一套旅游/旅行预订 HTML 模板，提供首页、目的地、行程、博客、团队等十余个完整页面，内置 Swiper 轮播、响应式布局和 jQuery 交互逻辑，适合快速搭建旅游类网站。 ## 技术栈 - HTML5 / CSS3（SCSS 源码 + 编译后 CSS） - jQuery（主体交互） - Swiper.js（轮播组件） - Bootstrap 5（栅格与基础组件） - Google Fonts（Roboto / Nunito / Inter Tight 等字体） ## 项目结构 ``` 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 种首页变体，建议根据实际业务选择其一作为入口，避免冗余代码。