Aqua.css 使用教程

最新推荐文章于 2024-08-30 18:35:00 发布

戴策峥Homer

最新推荐文章于 2024-08-30 18:35:00 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/gitblog_00720/article/details/141345896

版权

Aqua.css 使用教程

aqua.cssAn elegant CSS Framework.项目地址:https://gitcode.com/gh_mirrors/aq/aqua.css

项目介绍

Aqua.css 是一个优雅的纯 CSS 框架，旨在为开发者提供简洁、易用的样式解决方案。该框架不包含任何 JavaScript，适用于各种前端项目，无需掌握 React、Vue 等框架即可快速上手。Aqua.css 提供了丰富的工具类和组件，支持通过 CDN 或 npm 安装使用。

项目快速启动

通过 CDN 引用

在页面的 <head> 标签里添加以下行即可：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css" />

通过 npm 安装

在项目目录下运行以下命令：

npm i @alphardex/aqua.css

应用案例和最佳实践

案例一：简单的静态页面

使用 Aqua.css 可以快速构建一个简单的静态页面，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aqua.css 示例</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css">
</head>
<body>
    <header>
        <h1>欢迎使用 Aqua.css</h1>
    </header>
    <main>
        <p>这是一个简单的示例页面。</p>
    </main>
    <footer>
        <p>© 2024 Aqua.css</p>
    </footer>
</body>
</html>