Cutest UI

一个简洁、美观的CSS样式框架，提供了丰富的UI组件和响应式设计

Cutest UI是一个轻量级、模块化的样式框架，为您的Web应用提供一致、美观的用户界面。无论是按钮、表单、卡片还是网格布局，我们都提供了精心设计的组件，帮助您快速构建专业的Web界面。

框架特点

🎨

简洁美观

精心设计的配色方案和视觉效果

📱

响应式设计

适配各种屏幕尺寸的设备

🧩

模块化

组件独立，按需使用

⚡

轻量级

体积小，加载快

组件列表

浏览我们精心设计的UI组件，每个组件都有详细的文档和使用示例

各种样式的按钮，包括主按钮、次要按钮、危险按钮等，支持不同尺寸和状态

完整的表单控件集合，包括输入框、选择框、复选框等，支持验证和各种状态

灵活的卡片布局，可用于展示各种内容，支持多种变体和响应式设计

强大的网格系统，用于创建响应式布局，支持不同列数、间距和对齐方式

选项卡组件

用于组织和切换内容的选项卡，支持多种样式和交互方式

模态框组件

弹出式对话框，用于显示重要信息、确认操作或表单填写

用于展示结构化数据的表格组件，支持排序、筛选和响应式设计

用于组织和展示内容的面板容器，支持多种变体和自定义样式

基础标签组件，提供简洁的标签样式和基础交互功能

高级标签组件

增强版标签组件，支持更多样式变体、交互效果和无障碍特性，适用于复杂的分类、筛选和标记功能

代码高亮显示组件，支持语法高亮、复制功能、行号显示和主题切换，提供良好的代码阅读体验

动态按钮组件

具有动态交互效果的按钮组件，支持悬停动画、点击反馈和多种样式变体，提升用户交互体验

浮动按钮组件

固定在页面角落的浮动操作按钮，支持自定义图标、颜色和点击行为，方便用户随时访问核心功能

多种风格的标志展示，包括马赛克、像素、黄金、中国红、青花瓷、大字报、英雄、动漫、二次元和元宇宙等二十一种不同样式

倒计时组件

多种风格的倒计时效果，支持自定义时间、动画和视觉样式，适用于活动促销、产品发布等场景

多种样式的用户头像展示，支持圆形、方形、带边框等多种变体，可用于用户列表、个人资料等场景

用于数据分页的导航组件，支持页码跳转、上一页/下一页、跳转至首页/末页等功能

顶部导航栏组件，支持多级菜单、下拉选项、响应式设计等功能

多功能菜单组件，支持多级嵌套、折叠展开、高亮显示等交互效果

穿梭框组件

用于在两个列表间转移数据的组件，支持搜索、批量操作、自定义样式等功能

示例列表

浏览我们精心设计的完整UI示例，展示组件的实际应用

侧边导航示例

多级折叠式侧边导航菜单的完整实现，支持响应式设计和嵌套子菜单

热点标记示例

在图片上创建交互式热点标记，支持多种类型、大小和交互动画效果

热力图示例

数据可视化热力图组件，支持多主题颜色、交互效果和响应式设计

控制台示例

模拟终端控制台界面，支持命令输入、输出显示、历史记录等功能

使用指南

快速开始

在页面中引入所需的CSS文件
使用相应的类名应用组件样式
根据需要自定义样式和行为

文件结构

basic.css: 基础样式和变量
buttons.css: 按钮组件样式
forms.css: 表单组件样式
cards.css: 卡片组件样式
grids.css: 网格系统样式
tabs.css: 选项卡组件样式
modals.css: 模态框组件样式
panels.css: 面板组件样式
side-nav.css: 侧边导航组件样式
codes.css: 代码高亮组件样式
public/static/css/gqlite-logo/: 标志组件样式目录，包含二十一种不同风格的标志样式
countdowns.css: 倒计时组件样式，提供多种动画和视觉效果
avatars.css: 头像组件样式，支持多种形状和边框效果