Contrive - 家具店 HTML 模板 preview 1

Contrive - 家具店 HTML 模板

bookmark

Contrive 是一款基于 Bootstrap 的多页面零售电商 HTML 模板，提供首页、商品页、购物车、结算、博客等完整页面布局，适合快速搭建电商网站或着陆页。模板使用珊瑚橙配色，内置轮播、动画滚动等交互效果。

HTML

项目简介

Contrive 是一款基于 Bootstrap 的多页面零售电商 HTML 模板，提供首页、商品页、购物车、结算、博客等完整页面布局，适合快速搭建电商网站或着陆页。模板使用珊瑚橙配色，内置轮播、动画滚动等交互效果。

技术栈

  • Bootstrap 5.x（响应式框架）
  • Owl Carousel 2.3.4（轮播组件）
  • AOS（滚动动画库）
  • Font Awesome 6.5（图标）
  • Google Fonts：Archivo、Jost（字体）
  • PHP（仅 contact-form.php 处理联系表单）

项目结构

text
contrivehtml-10/
└── contrive/
    ├── index.html          # 首页（首页布局1）
    ├── index1.html         # 首页布局2
    ├── index2.html         # 首页布局3
    ├── shop.html           # 商品列表
    ├── product-detail.html # 商品详情
    ├── cart.html           # 购物车
    ├── checkout.html       # 结算页
    ├── contact.html        # 联系页
    ├── contact-form.php    # 联系表单处理
    ├── blog.html           # 博客列表
    ├── single-blog.html    # 博客详情
    ├── about.html          # 关于我们
    ├── team.html           # 团队成员
    ├── faq.html            # 常见问题
    ├── 404.html            # 404页面
    └── assets/
        ├── bootstrap/      # Bootstrap CSS
        ├── css/            # 主题样式
        └── images/         # 图片资源

核心文件说明

  • contrive/index.html — 主首页模板，包含顶部促销栏、导航、 Banner 及各模块
  • contrive/assets/css/style.css — 全局样式表，定义颜色变量及排版规范
  • contrive/assets/css/responsive.css — 响应式适配样式
  • contrive/contact-form.php — 联系表单后端处理脚本，发送邮件到指定地址
  • contrive/shop.html — 商品列表页模板
  • contrive/product-detail.html — 商品详情页模板

快速开始

  1. 直接用浏览器打开 contrive/index.html 即可预览
  2. 如需使用联系表单，需配置 PHP 环境（如 XAMPP、php -S）并将表单提交地址指向 contact-form.php
  3. 可直接复制 index.html 为新页面，根据需要修改内容

使用建议

  • 替换 assets/images/ 中的占位图片为实际素材
  • 如需后端功能（购物车、订单），需自行开发或接入电商后台服务
  • 颜色主题由 style.css 中的 CSS 变量控制，可统一修改 --e-global-color-accent 等值实现换色
help_outline

常见问题