Basex - 一页作品集模板 preview 1

Basex - 一页作品集模板

bookmark

Basex 是一款单页作品集 HTML 模板,支持深/浅主题切换,提供 Hero 轮播、图片墙、视频背景等多种首页变体,适合个人作品集或小型商业网站快速上线。内置 jQuery 特效、计数器、灯箱等交互组件,无需额外依赖。

HTML

项目简介

Basex 是一款单页作品集 HTML 模板,支持深/浅主题切换,提供 Hero 轮播、图片墙、视频背景等多种首页变体,适合个人作品集或小型商业网站快速上线。内置 jQuery 特效、计数器、灯箱等交互组件,无需额外依赖。

技术栈

  • HTML5 + CSS3(CSS 变量支持主题切换)
  • jQuery(非模块化 CDN 引入)
  • PHP(仅用于 contact.php 表单处理)

项目结构

text
basexhtml-10/
├── Template/
│   ├── index-*.html    # 8 种首页变体
│   ├── contact.php     # 表单后端
│   └── MIT-License/
├── css/
│   ├── style.css       # 主样式(含全部组件样式)
│   └── plugins.css     # 第三方插件样式
├── fonts/ionicons/     # 图标字体
└── img/                # 示例图片资源

核心文件说明

  • Template/index-*.html — 首页入口,按功能选择对应文件
  • css/style.css — 主样式表,含深色模式与所有 UI 组件样式
  • css/plugins.css — Magnific Popup、Lity、Owl Carousel 等插件样式
  • contact.php — 表单提交处理,将数据发送至指定邮箱
  • img/ — 轮播背景、团队照片、作品缩略图等示例资源
  • Documentation/index.html — 官方使用文档,含各模块修改说明

快速开始

  1. 直接在浏览器打开 Template/index-SINGLE-IMAGE-LIGHT.html 预览效果
  2. 修改 CSS 中的图片路径指向你的资源,或替换 img/ 目录下的文件
  3. 部署时将整个 Template 文件夹上传至服务器;contact.php 需要 PHP 环境支持

使用建议

替换所有 img/ 中的示例图片后,建议用 body-dark 类替换 <body> 标签以切换深色主题。若需表单功能,请将 contact.php 中 $myemail 改为实际收件地址。

help_outline

常见问题