Liko - 创意机构和作品集 HTML 模板

# 项目简介 Liko 是一款面向创意机构和个人作品集的多用途 HTML 模板，提供超过 30 个预制页面，涵盖首页变体、作品集、博客、电商（购物车/结算）、联系表单等多种场景，支持亮色与暗色模式切换。 ## 技术栈 - HTML5 / CSS3（原生 + Bootstrap 4 网格） - jQuery（核心交互库） - Slick Slider（轮播组件） - Nice Select（自定义下拉框） - Google Fonts（Syne、Big Shoulders Display 等字体） ## 项目结构 ``` likohtml-10/ ├── documentation/ # 官方文档 │ ├── index.html │ └── assets/ │ ├── css/ # 文档样式（elegantFont、responsive、style） │ ├── fonts/ │ ├── images/ │ └── js/ # 文档导航与搜索逻辑 └── liko/ # 模板主体 ├── index-*.html # 12 种首页变体 ├── index-dark-*.html # 暗色首页变体 ├── about-*.html # 关于页面 ├── blog-*.html # 博客页面 ├── cart.html / checkout.html # 电商页面 ├── contact*.html # 联系页面 └── assets/ ├── css/main.css # 全部样式 ├── js/ │ ├── main.js # 核心交互（Slick、滑块、导航） │ └── app.js # 视差轮播逻辑 └── img/ # 示例图片资源 ``` ## 核心文件说明 - `liko/index-*.html` — 各首页变体的入口文件，可直接复制修改 - `liko/assets/css/main.css` — 全部样式定义，含主题变量、组件、页面专属样式 - `liko/assets/js/main.js` — 核心交互：预加载、吸顶导航、搜索弹出、轮播初始化 - `liko/assets/js/app.js` — 视差轮播（parallax-slider）的滚动驱动逻辑 - `documentation/index.html` — 官方文档，含模板结构、定制指引与第三方资源说明 ## 快速开始 1. 在本地 Web 服务器上打开 `liko/index-10.html`（任意 index 页面） 2. 如需修改配色或字体，编辑 `liko/assets/css/main.css` 顶部的 CSS 变量（`--tp-common-*`、`--tp-ff-*`） 3. 替换 `assets/img/` 下的占位图片为实际内容 ## 使用建议 模板已内置多套首页和暗色变体，建议先从 `index-10.html`（完整功能展示页）入手，找到需要的组件后再复制到目标页面。暗色页面仅通过 CSS 类名切换，如需统一改造主题色，重点修改 `main.css` 中的 CSS 变量即可全局生效。