Inkist - 虚拟主机 HTML 5 模板 preview 1

Inkist - 虚拟主机 HTML 5 模板

bookmark

Inkist 是一款面向主机托管服务的响应式 HTML5 网站模板,采用深蓝色调设计,提供首页、关于页、博客、登录注册等多种页面模板,适合快速搭建虚拟主机、云服务、VPN 等互联网服务商的官网或营销页面。模板基于 Bootstrap 框架,纯静态实现,无需额外构建工具。

HTML

项目简介

Inkist 是一款面向主机托管服务的响应式 HTML5 网站模板,采用深蓝色调设计,提供首页、关于页、博客、登录注册等多种页面模板,适合快速搭建虚拟主机、云服务、VPN 等互联网服务商的官网或营销页面。模板基于 Bootstrap 框架,纯静态实现,无需额外构建工具。

技术栈

  • Bootstrap 4(响应式布局框架)
  • jQuery 3.x(交互脚本)
  • HTML5 / CSS3(页面结构与样式)
  • Google Fonts(Oswald、Rubik、Maven Pro 字体)
  • Font Awesome(图标库)

项目结构

text
inkist-package/
├── inkist-documentation/
│   ├── index.html          # 模板使用文档
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   └── style.css       # 文档页样式
│   └── img/
│       └── favicon.png
└── inkist-html/
    ├── index.html          # 模板预览首页
    ├── home1.html          # 首页方案一
    ├── home2.html          # 首页方案二
    ├── hosting.html        # 主机托管页
    ├── cloud-hosting.html  # 云主机页
    ├── dedicated.html      # 独立服务器页
    ├── vpn-hosting.html    # VPN 服务页
    ├── domain.html         # 域名注册页
    ├── about.html          # 关于我们
    ├── blog.html           # 博客列表
    ├── blog-details.html   # 博客详情
    ├── contact.html        # 联系我们
    ├── login.html          # 登录页
    ├── signup.html         # 注册页
    ├── faq.html            # 常见问题
    ├── testimonial.html    # 用户评价
    ├── style.css           # 主样式文件
    └── assets/             # 公共资源目录
        ├── css/            # 第三方 CSS
        ├── js/             # 第三方 JS
        └── img/            # 图片素材

核心文件说明

  • inkist-html/index.html — 模板预览页面,集中展示所有页面入口
  • inkist-html/home1.html — 第一个首页设计方案
  • inkist-html/style.css — 核心样式表,包含全部页面布局与配色定义
  • inkist-html/login.html — 登录表单页面,包含导航栏与表单验证 UI
  • inkist-documentation/index.html — 官方使用文档,介绍文件结构与修改方法
  • assets/js/ — jQuery 插件集合(Bootstrap、Owl Carousel、magnific-popup 等)

快速开始

  1. 解压压缩包,进入 inkist-package/inkist-html/ 目录
  2. 直接在浏览器打开 index.html 预览全部页面
  3. 编辑对应的 .html 文件修改内容,参考 inkist-documentation/index.html 中的文档说明
  4. 替换 assets/img/ 目录下的图片素材后即可上线

使用建议

  • 该模板为纯静态页面,无需 Node.js 或任何构建工具即可运行
  • 建议在正式环境中将资源路径从相对路径改为 CDN 或私有 CDN,以提升加载速度
  • 修改 style.css 时注意区分首页(home1/home2)与内页的配色区域,确保风格一致
help_outline

常见问题