项目简介link

Liko 是一款面向创意机构和个人作品集的多用途 HTML 模板，提供超过 30 个预制页面，涵盖首页变体、作品集、博客、电商（购物车/结算）、联系表单等多种场景，支持亮色与暗色模式切换。

技术栈link

• HTML5 / CSS3（原生 + Bootstrap 4 网格）
• jQuery（核心交互库）
• Slick Slider（轮播组件）
• Nice Select（自定义下拉框）
• Google Fonts（Syne、Big Shoulders Display 等字体）

项目结构link

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/            # 示例图片资源

核心文件说明link

• liko/index-*.html — 各首页变体的入口文件，可直接复制修改
• liko/assets/css/main.css — 全部样式定义，含主题变量、组件、页面专属样式
• liko/assets/js/main.js — 核心交互：预加载、吸顶导航、搜索弹出、轮播初始化
• liko/assets/js/app.js — 视差轮播（parallax-slider）的滚动驱动逻辑
• documentation/index.html — 官方文档，含模板结构、定制指引与第三方资源说明

快速开始link

1. 在本地 Web 服务器上打开 liko/index-10.html（任意 index 页面）
2. 如需修改配色或字体，编辑 liko/assets/css/main.css 顶部的 CSS 变量（--tp-common-*、--tp-ff-*）
3. 替换 assets/img/ 下的占位图片为实际内容

使用建议link

模板已内置多套首页和暗色变体，建议先从 index-10.html（完整功能展示页）入手，找到需要的组件后再复制到目标页面。暗色页面仅通过 CSS 类名切换，如需统一改造主题色，重点修改 main.css 中的 CSS 变量即可全局生效。