Tour Destination Layout

一个用于展示旅游、户外、目的地、产品场景或品牌形象内容的响应式 HTML 页面示例。

页面采用 左侧文案 + 右侧错落式图片拼贴 的布局方式，整体风格简洁、大气，适合用于官网首页模块、Landing Page、活动介绍页、产品应用场景展示页等。

页面效果说明

桌面端页面主要分为两部分：

• 左侧为标题、装饰线、说明文字和按钮
• 右侧为四张图片组成的错落式 Gallery 布局

右侧图片不是普通的平均四宫格，而是采用：

左列：上短图 + 下长图
右列：上长图 + 下短图

这种布局可以让页面更有节奏感，避免普通网格带来的呆板感。

适用场景

该布局适合用于：

• 旅游线路介绍
• 户外活动页面
• 目的地展示页面
• 品牌形象展示
• 产品应用场景展示
• 工程案例展示
• 展厅 / Showroom 页面
• 服务优势介绍模块

如果用于地板、墙板、户外露台、围栏等产品页面，可以将左侧文案替换为产品卖点，右侧图片替换为真实应用场景图。

目录结构

.
├── index.html
└── assets
    ├── css
    │   └── style.css
    └── images
        ├── tour-1.svg
        ├── tour-2.svg
        ├── tour-3.svg
        └── tour-4.svg

文件说明

index.html

页面主体结构文件，包含：

• 外层 section
• 居中 container
• 左侧内容区
• 右侧图片拼贴区

主要结构如下：

<section class="tour-section">
  <div class="tour-container">
    <div class="tour-content">
      <!-- 标题、说明文字、按钮 -->
    </div>

    <div class="tour-gallery">
      <!-- 图片拼贴区域 -->
    </div>
  </div>
</section>

assets/css/style.css

页面样式文件，包含：

• 页面基础样式
• 左右两栏布局
• 图片错落排版
• 按钮样式
• 响应式适配

assets/images/

图片资源目录。

当前使用的是带背景颜色的简单 SVG 占位图，便于后期替换为真实图片。

核心布局思路

页面整体采用 CSS Grid 实现左右布局：

.tour-container {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 60px;
  align-items: center;
}

左侧内容区控制宽度，右侧图片区域占据剩余空间。

右侧图片区域再次使用两列布局：

.tour-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

每一列内部使用纵向排列：

.gallery-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

通过给图片设置不同高度，形成错落感：

.gallery-image--small {
  height: 220px;
}

.gallery-image--large {
  height: 370px;
}

标题字号说明

页面标题使用了 clamp() 来实现响应式字号：

.tour-content h1 {
  font-size: clamp(1.7rem, 2.55vw, 2.6rem);
}

含义如下：

• 最小字号：1.7rem，约 27.2px
• 中间自适应：2.55vw
• 最大字号：2.6rem，约 41.6px

这样可以避免桌面端标题过大，同时保证手机端仍然有较好的可读性。

响应式设计

页面已经考虑手机端显示效果。

在较小屏幕下，左右布局会自动变为上下结构：

@media (max-width: 768px) {
  .tour-container {
    grid-template-columns: 1fr;
  }
}

手机端布局顺序为：

标题文案
按钮
图片区域

图片区域在手机端会改为单列或更适合小屏幕阅读的结构，避免图片过窄、内容拥挤的问题。

如何替换图片

当前图片位于：

assets/images/

可以将 SVG 文件替换为真实图片，例如：

assets/images/tour-1.jpg
assets/images/tour-2.jpg
assets/images/tour-3.jpg
assets/images/tour-4.jpg

然后在 index.html 中修改对应路径即可：

<img src="assets/images/tour-1.jpg" alt="Tour destination image">

建议图片尺寸保持统一比例，方便排版稳定。

推荐图片尺寸：

短图：800 x 500 左右
长图：800 x 1000 左右

实际项目中也可以统一使用横图，然后通过 CSS 的 object-fit: cover; 自动裁切。

如何修改颜色

页面主要颜色集中在 CSS 变量中，后期可以快速调整：

:root {
  --color-bg: #f5f5f5;
  --color-text: #101828;
  --color-muted: #4b5563;
  --color-accent: #ff1f5b;
}

例如要把按钮和装饰线从粉红色改为蓝色，可以修改：

--color-accent: #2563eb;

如何修改按钮

按钮文字在 index.html 中修改：

<a href="#" class="tour-button">Learn More</a>

可以替换为：

<a href="/contact/" class="tour-button">Contact Us</a>

后期扩展方向

后续可以继续扩展：

• 添加鼠标 hover 图片放大效果
• 图片点击后弹出大图预览
• 接入 Swiper 做移动端滑动图库
• 改造成 WordPress 模板模块
• 接入 ACF 字段，方便后台维护标题、文案和图片
• 增加滚动进入动画
• 增加深色主题版本
• 增加多组 Gallery Section 循环输出

注意事项

1. 图片区域建议保持统一间距，不要每张图片单独设置不同 margin。
2. 标题区域宽度不宜过大，否则会削弱右侧图片的视觉重点。
3. 右侧图片要比左侧文案拥有更强视觉重量，这样页面才会更接近展示型 Landing Page。
4. 手机端建议优先保证阅读体验，不必强行保留桌面端的复杂拼贴关系。
5. 如果后续放入 WordPress 页面中，建议将 CSS 类名保持独立，避免和主题样式冲突。

版本记录

v1.0.0

首个完整版本。

主要内容：

• 完成左侧文案 + 右侧错落图片拼贴布局
• 使用 SVG 占位图作为图片资源
• CSS 和图片资源独立目录管理
• 支持桌面端和手机端响应式布局
• 优化标题字号，避免桌面端 H1 过大