Pubzi – 电子竞技和游戏 HTML 模板 preview 1

Pubzi – 电子竞技和游戏 HTML 模板

bookmark

Pubzi 是一款面向电竞游戏行业的静态 HTML 模板，基于 Bootstrap 5 构建，适用于游戏平台、电竞团队官网、游戏媒体资讯等场景。模板提供 7 个首页变体及完整的内页（游戏详情、赛事、团队、新闻动态、定价、FAQ 等），支持移动端响应式布局。

HTMLactionadventurearcadebattleconsoleesportsfantasy

项目简介

Pubzi 是一款面向电竞游戏行业的静态 HTML 模板，基于 Bootstrap 5 构建，适用于游戏平台、电竞团队官网、游戏媒体资讯等场景。模板提供 7 个首页变体及完整的内页（游戏详情、赛事、团队、新闻动态、定价、FAQ 等），支持移动端响应式布局。

技术栈

  • Bootstrap 5 — 响应式 CSS 框架
  • jQuery 3.7.1 — DOM 交互
  • GSAP + ScrollTrigger — 高性能动画与滚动驱动效果
  • Swiper — 轮播与滑动组件
  • MeanMenu — 移动端汉堡导航
  • NiceSelect — 美化下拉选择框
  • Magnific Popup — 图片/视频灯箱
  • Wow.js — 滚动动画

项目结构

text
pubzihtml-10/
└── Buyer files/
    ├── index.html              # 首页（7 种变体: index.html ~ index-7.html）
    ├── about.html
    ├── game.html / game-details.html
    ├── match.html / match-details.html
    ├── news*.html              # 新闻列表、详情、网格布局
    ├── team.html / team-details.html
    ├── pricing.html / faq.html
    ├── service*.html / contact.html
    ├── gallery.html / coming-soon.html / 404.html
    └── assets/
        ├── css/                # 编译后样式（main.css 等）
        ├── scss/              # SCSS 源文件
        ├── js/                # jQuery 插件与业务逻辑
        └── img/               # 静态图片资源

核心文件说明

  • Buyer files/index.html — 主入口页，包含预加载动画、滚动导航、固定头部等基础结构
  • Buyer files/assets/js/main.js — 核心交互逻辑：移动端导航初始化、轮播实例化、视差效果、自定义光标、计数器等
  • Buyer files/assets/css/main.css — 完整主题样式，包含按钮组件、布局、颜色变量及响应式断点
  • Buyer files/assets/scss/ — SCSS 源文件目录，按模块划分（_buttons.scss、_hero.scss、_game.scss 等）
  • Buyer files/game.html — 游戏列表展示页面
  • Buyer files/news.html — 资讯动态列表页面

快速开始

本项目为纯静态模板，无需构建工具即可运行：

  1. 直接在浏览器中打开 Buyer files/index.html；或
  2. 使用 VS Code Live Server、http-server 等本地服务器启动，确保所有资源正常加载。
  3. 若需修改 SCSS，则需配置 Sass 编译器将 scss/ 目录输出为 css/ 下的同名文件。

使用建议

  • 模板中的轮播组件（Swiper）、视差效果（parallaxie）和 GSAP 动画已封装完毕，直接复制对应区块即可复用，无需自行编写 JS。
  • 移动端导航依赖 MeanMenu，如需调整断点或菜单结构，可修改 main.js 中 $('#mobile-menu').meanmenu({ meanScreenWidth: "1199" }) 的配置。
help_outline

常见问题