holiday.css 使用教程

最新推荐文章于 2024-08-27 09:14:29 发布

崔锴业Wolf

最新推荐文章于 2024-08-27 09:14:29 发布

阅读量406

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00900/article/details/141584556

版权

holiday.css 使用教程

holiday.cssA minimalist classless CSS theme with dark mode support. Only 5 KB.项目地址:https://gitcode.com/gh_mirrors/ho/holiday.css

项目介绍

holiday.css 是一个极简主义的无类 CSS 主题，支持暗模式，大小仅为 5 KB。它使用语义化的 HTML 标记，不依赖任何 CSS 类。holiday.css 可以作为项目站点、博客或“关于我”页面的基础，也可以在其基础上进行扩展。

项目快速启动

要在你的项目中快速使用 holiday.css，只需在你的 HTML 文件的 <head> 部分添加以下链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.11.2" />

以下是一个简单的 HTML 示例，展示了如何使用 holiday.css：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>holiday.css 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.11.2" />
</head>
<body>
    <header>
        <h1>欢迎使用 holiday.css</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>项目介绍</h2>
            <p>holiday.css 是一个极简主义的无类 CSS 主题，支持暗模式，大小仅为 5 KB。</p>
        </section>
        <section>
            <h2>快速启动</h2>
            <p>只需在你的 HTML 文件的 `<head>` 部分添加以下链接：</p>
            <pre><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.11.2" /&gt;</code></pre>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>