Cutest UI 样式框架

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

按钮组件

Cutest UI 提供了多种风格的按钮,可以根据不同场景选择合适的按钮样式。

基础按钮

尺寸变体

块级按钮

表单组件

美观、易用的表单元素,支持多种输入类型和状态。

基础表单元素

选择控件

卡片组件

用于展示内容的卡片容器,支持多种布局和样式。

基础卡片

这是一个基础的卡片组件,用于展示相关信息。

带链接的卡片

卡片可以包含链接和交互元素,提供更好的用户体验。

了解更多

响应式卡片

卡片会根据容器宽度自动调整布局,在不同设备上都有良好的显示效果。

网格布局

灵活的网格系统,用于创建响应式页面布局。

网格项 1
网格项 2
网格项 3
网格项 4
网格项 5
网格项 6

使用示例

以下是使用 Cutest UI 的基础HTML结构示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cutest UI 示例</title>
    <!-- 引入必要的样式文件 -->
    <link rel="stylesheet" href="/static/css/basic.css">
    <link rel="stylesheet" href="/static/css/buttons.css">
    <link rel="stylesheet" href="/static/css/forms.css">
</head>
<body>
    <!-- 内容区域 -->
    <div class="container">
        <h1>Hello, Cutest UI!</h1>
        <button class="button">点击我</button>
    </div>
</body>
</html>