计数 - 响应式即将推出页面 preview 1

计数 - 响应式即将推出页面

bookmark

The Count 是一款响应式"网站即将上线"页面模板，配备倒计时、动态菜单面板、联系表单和关于我们区域。提供图片轮播（Supersized）和 YouTube 视频（YTPlayer）两种背景模式，适合用于产品发布、活动预告等场景。

HTML

项目简介

The Count 是一款响应式"网站即将上线"页面模板，配备倒计时、动态菜单面板、联系表单和关于我们区域。提供图片轮播（Supersized）和 YouTube 视频（YTPlayer）两种背景模式，适合用于产品发布、活动预告等场景。

技术栈

  • HTML5 / CSS3（静态页面）
  • jQuery（交互与插件）
  • Supersized（图片轮播背景）
  • YTPlayer（YouTube 视频背景）
  • Skeleton CSS（响应式栅格）
  • Google Fonts（Bebas Neue、Big Noodle Titling Oblique）
  • PHP（联系表单后端）

项目结构

text
thecounthtml-10/
├── The-Count-v1-1-Template/
│   ├── image-background/          # 图片背景版
│   │   ├── index.html
│   │   ├── send.php               # 邮件发送
│   │   ├── css/                   # 样式文件
│   │   ├── js/                    # 脚本文件
│   │   └── twitter/               # Twitter 滚动条
│   └── video-background/          # 视频背景版（含 YTPlayer）
│       ├── index.html
│       ├── YTPlayer/
│       ├── css/
│       └── js/
└── The-Count-v1-1-Documentation/  # 官方文档
    └── index.html

核心文件说明

  • image-background/index.html — 图片背景版主页面
  • video-background/index.html — 视频背景版主页面
  • css/style.css — 主样式表（含字体、布局、动画等）
  • js/countdown.js — 倒计时逻辑
  • js/contact-form.js — 联系表单处理
  • send.php — 表单数据邮件发送（需配置服务器）

快速开始

纯静态页面，直接用浏览器打开 image-background/index.html 或 video-background/index.html 即可预览。如需表单功能，需将文件部署到支持 PHP 的 Web 服务器并配置 send.php 中的收件邮箱。

使用建议

  • 图片版适合展示多张作品轮播；视频版需替换 index.html 中的 YouTube 视频 ID（查找 kWQLkrYxmpc 替换为你的视频）
  • 倒计时目标时间在 js/countdown.js 中配置
  • 字体文件需随 CSS 中的路径一起部署，否则字体可能无法加载
help_outline

常见问题