
Ciri AI - AI 图像生成器 HTML 模板
# 项目简介
Ciri AI 是一个在线 AI 图像生成器展示网站模板,采用纯静态 HTML 构建,提供多页面版(MultiPage)和单页面版(OnePage)两种版本。模板包含完整的首页展示、特性介绍、定价、博客、联系等页面,适合快速搭建 AI 图像生成工具的营销页面或落地页。
## 技术栈
- HTML5 + Vanilla JavaScript(无构建工具,纯静态)
- Bootstrap 5(响应式布局)
- Slick Slider(图库轮播)
- RemixIcon(图标库)
- CSS3(自定义样式与媒体查询)
## 项目结构
```
ciriaihtml-10/Main File/
├── Documentation/
│ ├── MultiPage-CiriAI/
│ │ ├── index.html
│ │ ├── header.html
│ │ ├── component.html
│ │ ├── features.html
│ │ ├── slider-type.html
│ │ ├── page-element.html
│ │ └── credit.html
│ └── OnePage-CiriAI/
│ └── (组件文档页)
└── Online AI Image Generator HTML Template - Ciri AI/
├── MultiPage-CiriAI/
│ ├── index.html
│ ├── about.html, blog.html, contact.html
│ ├── features.html, pricing.html, faq.html
│ └── errorPage.html, comingSoon.html
└── OnePage-CiriAI/
└── index.html(单页全站式)
```
## 核心文件说明
- `MultiPage-CiriAI/index.html` — 多页面版首页,包含导航、输入生成区、图库展示
- `OnePage-CiriAI/index.html` — 单页面版,所有内容汇聚在一个长页面中
- `assets/css/style.css` — 主样式文件,定义整体视觉风格
- `assets/css/slick.css` — 轮播图样式依赖
- `assets/css/bootstrap.min.css` — Bootstrap 基础布局框架
## 快速开始
纯静态项目,无需安装依赖:
1. 直接在浏览器中打开 `Online AI Image Generator HTML Template - Ciri AI/MultiPage-CiriAI/index.html` 或 `OnePage-CiriAI/index.html`
2. 或使用本地服务器(如 VS Code Live Server 插件)运行
## 使用建议
模板自带完整页面结构,建议根据实际 AI 产品替换 Logo、文案和图片资源;输入框和生成按钮目前为前端展示,需要后端接入真实的图像生成 API 才能实现功能。
help_outline
常见问题
评论0
发布时间Jan 20, 2026
技术栈
HTML