Cardex - 一页作品集模板 preview 1

Cardex - 一页作品集模板

bookmark

Cardex 是一款单页作品集 HTML 模板，支持全屏幻灯片、视差背景、视频背景（YouTube/Vimeo）等多种首页效果，适合个人摄影师、设计师或创意从业者展示作品。模板提供 6 种首页变体，直接修改内容即可使用，无需编程基础。

HTML

项目简介

Cardex 是一款单页作品集 HTML 模板，支持全屏幻灯片、视差背景、视频背景（YouTube/Vimeo）等多种首页效果，适合个人摄影师、设计师或创意从业者展示作品。模板提供 6 种首页变体，直接修改内容即可使用，无需编程基础。

技术栈

  • HTML5 + CSS3
  • jQuery
  • Slick Carousel（幻灯片/走马灯）
  • jQuery ScrollTo（平滑滚动导航）
  • PHP（联系表单后端处理，仅 contact.php）

项目结构

text
cardexhtml-10/
├── Cardex-v1-0-Documentation/    # 在线文档
│   ├── index.html
│   └── assets/
├── Cardex-v1-0-Template/         # 模板主体
│   ├── index-*.html              # 6种首页变体
│   ├── contact.php               # 联系表单处理
│   ├── css/
│   │   ├── style.css             # 主样式
│   │   └── plugins.css           # 第三方插件样式
│   ├── fonts/                    # ionicons 图标字体
│   ├── img/                      # 图片资源
│   └── js/
│       ├── cardex.js             # 模板核心交互
│       └── plugins.js            # 第三方插件
└── THEMELOCK.COM.txt             # 来源说明

核心文件说明

  • index-*.html — 首页变体（Hero 幻灯片、Kan Burns、单机图片、视频背景等）
  • css/style.css — 主样式表，含所有区块样式（About、Works、News、Contact 等）
  • js/cardex.js — 导航、幻灯片、视差滚动等核心交互逻辑
  • contact.php — 联系表单邮件发送后端，需配置 $myemail 变量
  • img/ — 背景图、作品图、新闻图、导航图等素材
  • css/plugins.css — Slick、Magnific Popup 等插件的样式覆盖

快速开始

  1. 解压 ZIP 包，进入 Cardex-v1-0-Template 文件夹
  2. 直接用浏览器打开任意 index-*.html 文件预览
  3. 上传到服务器时，将该文件夹内容全部上传至 public_html
  4. 联系表单需确保服务器支持 PHP，并在 contact.php 中修改收件邮箱地址

使用建议

推荐选择最接近需求的首页变体（如 index-KENBURNS-SLIDESHOW.html）作为基础，然后替换 img/ 目录下的图片及 style.css 中的背景路径即可。视频背景需自行替换视频 ID。

help_outline

常见问题