项目简介link

Teckko 是一套面向 IT 科技公司的静态 HTML 模板，基于 Bootstrap 5 构建，提供完整的前端页面（首页、关于、博客、作品集、服务、团队、定价、FAQ 等），适合快速搭建 IT 服务或软件公司的企业官网。

技术栈link

• HTML5 / CSS3（静态页面）
• Bootstrap 5（响应式布局框架）
• SCSS（样式开发，但发布版为编译后的 CSS）
• jQuery（DOM 交互与动画逻辑）
• 第三方 CSS 库：Animate、Swiper Slider、Magnific Popup、Nice Select、Odometer
• 自定义 Icon Font（IcoMoon）

项目结构link

teckko-package/
├── documentation/              # 文档目录
└── teckko/
    ├── index.html               # 首页入口
    ├── about-us.html
    ├── blog-*.html              # 博客相关页面（4种布局）
    ├── contact.html
    ├── faq.html
    ├── porfolio-*.html          # 作品集页面（3种布局）
    ├── pricing.html
    ├── services-*.html
    ├── team.html
    ├── contact/
    │   └── contact-process.php  # 表单后端处理
    ├── css/
    │   ├── styles.css           # 主样式文件
    │   └── *.min.css            # 第三方库样式
    ├── icons/icomoon/
    │   ├── style.css            # Icon 字体样式
    │   └── selection.json       # IcoMoon 图标配置
    └── image/                   # 图片资源（avatar、blog、icon）

核心文件说明link

• teckko/index.html — 首页，包含顶部导航、轮播、计数器等主要模块
• teckko/css/styles.css — 主样式表，覆盖所有页面布局与配色
• teckko/js/main.js — 核心交互逻辑：吸顶导航、滚动加载、计数器、弹窗等
• teckko/scss/abstracts/_variable.scss — SCSS 变量定义，包含品牌色与字体配置
• teckko/contact/contact-process.php — 联系人表单的 PHP 后端处理脚本
• teckko/icons/icomoon/style.css — 自定义 Icon 字体样式，定义了 icon-fb、icon-phone 等类名

快速开始link

1. 直接用浏览器打开 teckko/index.html 即可预览全部页面。
2. 如需修改样式，编辑 scss/ 下的 SCSS 文件后重新编译，或直接修改 css/styles.css。
3. 联系表单需部署到 PHP 环境（推荐 Apache/Nginx），并将 contact-process.php 放置于可执行目录下。

使用建议link

本模板为纯前端静态站点，SEO 和多语言需自行扩展；如用于生产环境，建议将 CSS/JS 替换为压缩版本以提升加载速度。