Cardex - One Page Portfolio Template

# 项目简介 Cardex 是一款单页作品集 HTML 模板，支持全屏幻灯片、视差背景、视频背景（YouTube/Vimeo）等多种首页效果，适合个人摄影师、设计师或创意从业者展示作品。模板提供 6 种首页变体，直接修改内容即可使用，无需编程基础。 ## 技术栈 - HTML5 + CSS3 - jQuery - Slick Carousel（幻灯片/走马灯） - jQuery ScrollTo（平滑滚动导航） - PHP（联系表单后端处理，仅 contact.php） ## 项目结构 ``` 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。