📅 最后修改于: 2023-12-03 15:33:49.194000 🧑 作者: Mango
Pure.CSS 是一个轻量级的 CSS 框架，提供了一套基础组件和布局选项，以便开发者能够快速的创建漂亮的网站和 Web 应用程序。本文将介绍 Pure.CSS 的必需输入，即 HTML 输入，以便您开始使用 Pure.CSS。
Pure.CSS 采用典型的 HTML 文件结构：
<!doctype html>
<html>
<head>
<title>网站标题</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/pure-min.css">
</head>
<body>
<!-- 网站内容 -->
</body>
</html>
外部的 CSS 文件链接到 <head> 标签中。本例中，我们使用 pure-min.css 的 CDN 链接。
Pure.CSS 的网格使用了 flexbox 布局，在 HTML 中使用 .pure-g 和 .pure-u-* 类来定义列和行。 .pure-g 是一个包含整个网格的容器。
<div class="pure-g">
<div class="pure-u-1-3">
<!-- 包含 1/3 的宽度 -->
</div>
<div class="pure-u-2-3">
<!-- 包含 2/3 的宽度 -->
</div>
</div>
Pure.CSS 的表格有两个主要的类： .pure-table 和 .pure-table-horizontal。.pure-table 可用于垂直表格，.pure-table-horizontal 可用于水平表格。
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>
Pure.CSS 提供了多个预定义的表单控件样式，如文本框、选择框、单选框、复选框等。我们可以在表单元素上加入 Pure.CSS 预定义的类来应用这些样式。
<form class="pure-form">
<label for="name">姓名：</label>
<input type="text" id="name" class="pure-input-1" placeholder="请输入姓名" required>
<label for="gender">性别：</label>
<select id="gender" class="pure-input-1">
<option>男</option>
<option>女</option>
</select>
<label>兴趣爱好：</label>
<label for="football"><input type="checkbox" id="football" class="pure-checkbox">足球</label>
<label for="basketball"><input type="checkbox" id="basketball" class="pure-checkbox">篮球</label>
</form>
Pure.CSS 提供了多种按钮样式，如圆角、实心和空心等。我们可以在 <button>、<a> 和 <input> 元素上使用预定义的类来应用这些样式。
<button class="pure-button">默认按钮</button>
<a href="#" class="pure-button pure-button-primary">主要按钮</a>
<input type="submit" value="提交" class="pure-button button-success">
<button class="pure-button button-error">错误按钮</button>
<button class="pure-button button-warning">警告按钮</button>
以上是 Pure.CSS 必需的输入，您可以根据需要选择不同的组件和样式来构建漂亮的网站和 Web 应用程序。