项目简介link

Shock 是由 Codings 出品的一套基于 Bootstrap 5 的创意多用途 HTML 模板，包含首页、博客页、元素组件页、页眉页脚等多种预制页面，适合快速搭建现代商务、作品集或资讯类网站。模板内置丰富交互效果，支持高度定制。

技术栈link

• Bootstrap 5
• jQuery
• Font Awesome 6
• Swiper（轮播）
• AOS（滚动动画库）
• Lightbox（图片灯箱）
• CSS Variables（主题色系统）

项目结构link

shockhtml-104/HTML Template/
├── assets/
│   ├── css/
│   │   ├── theme.css        # 主题色变量、字体定义
│   │   ├── core.css         # 核心布局样式
│   │   └── main.css         # 组件样式
│   ├── js/
│   │   └── main.js          # 预加载器、弹窗、侧边挂件、轮播等交互
│   └── images/              # 占位图（需替换）
├── home-*.html              # 首页模板
├── blog-*.html              # 博客列表页
├── blog-post-*.html         # 博客详情页
├── header-*.html            # 页眉模板
├── footer-*.html            # 页脚模板
└── element-*.html           # 元素组件展示页

核心文件说明link

• assets/css/theme.css — 定义主色系（青绿 #07beb8、紫 #6917d0、粉 #ff1791）及 Lato / Proxima Nova 字体
• assets/css/main.css — 包含按钮、卡片、表单、侧边挂件、弹窗等所有组件样式
• assets/js/main.js — 实现预加载器、PopupBar、PopupBox、侧边挂件显隐、图标初始化等 19 项交互功能
• header-grid-*.html — 网格布局导航页，提供全屏菜单、搜索表单等不同头部方案
• element-*.html — 60+ 组件独立演示页面，可直接复制使用

快速开始link

纯静态模板，直接在浏览器打开 home-1.html 即可预览完整效果。无需安装依赖或构建。

使用建议link

模板为独立 HTML 文件，复制 HTML Template 目录至服务器即可使用。建议将 assets/images 中的占位图替换为真实素材，并参考 element-*.html 页面挑选组合所需组件。