Nano.css

完整HTML5标签支持的零类名CSS库

排版元素

标题层级

一级标题 (h1)

二级标题 (h2)

三级标题 (h3)

四级标题 (h4)

五级标题 (h5)
六级标题 (h6)

段落与文本

这是一个标准的段落文本。在现代网页设计中，段落是内容组织的基本单位，用于展示连续的文字内容。

这是另一个段落，包含加粗文本和斜体文本，以及一个示例链接。

CSS变量（也称为CSS自定义属性）是CSS中的强大功能，允许开发者在样式表中定义可重用的值。

— CSS权威指南
// 代码块示例
function toggleTheme() {
    const currentTheme = htmlElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    htmlElement.setAttribute('data-theme', newTheme);
}

其他文本元素

这是一句引文 - 使用q标签表示短引用

HTML - 使用abbr标签表示缩写

这是示例输出 - 使用samp标签表示程序输出

Ctrl + C - 使用kbd标签表示键盘输入

x = y + z - 使用var标签表示变量

H2O - 使用sub标签表示下标

E = mc2 - 使用sup标签表示上标

过时的内容 - 使用s标签表示不再准确的内容

小号文本 - 使用small标签表示小号文本

高亮文本 - 使用mark标签表示高亮文本

插入的文本 - 使用ins标签表示插入的文本

删除的文本 - 使用del标签表示删除的文本

列表元素

无序列表

  • 列表项 1
  • 列表项 2
    • 嵌套列表项 A
    • 嵌套列表项 B
  • 列表项 3

有序列表

  1. 第一步操作说明
  2. 第二步操作说明
    1. 子步骤 A
    2. 子步骤 B
  3. 第三步操作说明

定义列表

HTML
超文本标记语言，用于创建网页结构
CSS
层叠样式表，用于描述网页的表现
JavaScript
脚本语言，用于实现网页交互功能

表格元素

基础表格

员工信息表
姓名 职位 部门
张三 前端工程师 技术部
李四 UI设计师 设计部
王五 产品经理 产品部
共3名员工

表单元素

基础表单

个人信息
偏好设置

媒体元素

图片

示例图片
图1: 图片示例说明

嵌入内容

卡片组件 (.card)

卡片标题

这是整个库中唯一使用的自定义类，用于创建卡片式容器：

<div class="card">
    <h3>卡片标题</h3>
    <p>卡片内容...</p>
</div>

卡片提供视觉层次和内容分组，默认带有圆角、内边距和边框。

高级HTML5元素

详情与摘要

点击查看详情

这是使用details和summary标签创建的折叠内容区域。点击摘要可以展开或折叠内容。

这种元素非常适合FAQ部分或需要隐藏额外内容的情况。

进度条

65%

度量器

75%

数据列表

输出元素

+ = 75

对话框

对话框标题

这是一个使用dialog标签创建的模态对话框。

模板

模板内容不会在页面上显示，但可以通过JavaScript克隆和使用。