📌  相关文章
📜  Pure.CSS 所需输入(1)

📅  最后修改于: 2023-12-03 14:45:41.983000             🧑  作者: Mango

Pure.css 所需输入

Pure.css 是一款基于响应式设计，轻量级高效的 CSS 框架。它只提供了基本的样式和布局，让你可以更加独立的按自己的设计构建网站。在使用 Pure.css 前，你需要引入一些基本的代码和学会一些基本的语法。

引入基本代码

在使用 Pure.css 前，你需要先引入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css" integrity="sha512-U/EjcSaEhv99+r0EEAHLZzbnCvBL+mXzfT1OWRJM/iA4bbh4sJt4xq3THgQ2jzWjlQ2ffvHseX22WKdZfs1nWw==" crossorigin="anonymous" />
</head>
<body>
  <!-- Your content here -->
</body>
</html>

这段代码包含了一些基础的 HTML 结构和一个 link 标签链接了 Pure.css 的样式文件，确保你放在了页面的头部。

基本语法

Pure.css 主要使用了类选择器来实现样式，这意味着，你需要对 HTML 元素应用对应的 class，在 CSS 样式表中对这些类进行样式定义。

以下是 Pure.css 中常用的 class：

Grid

Grid 是 Pure.css 中的一种网格系统，它可以帮助你快速地创建一个多列布局。

以下是 Grid 中常用的 class：

  • .pure-g: 用来应用 Grid 网格系统。
  • .pure-u-*-*: 用来表示一列网格的大小。* 表示一个数字，分别表示在移动端、平板和桌面端的大小。
Buttons

Buttons 是 Pure.css 中的一种按钮系统，它可以帮助你快速地创建一个标准化的按钮。

以下是 Buttons 中常用的 class：

  • .pure-button: 用来应用一个按钮的基础样式。
  • .pure-button-primary: 用来应用一个主要按钮的样式。
  • .pure-button-secondary: 用来应用一个次要按钮的样式。
Forms

Forms 是 Pure.css 中的一种表单样式系统，它可以帮助你快速地创建一个标准化的表单。

以下是 Forms 中常用的 class：

  • .pure-form: 用来应用表单的基础样式。
  • .pure-form-stacked: 用来应用堆叠式的表单布局。
  • .pure-form-aligned: 用来应用对齐式的表单布局。
Tables

Tables 是 Pure.css 中的一种表格样式系统，它可以帮助你快速地创建一个标准化的表格。

以下是 Tables 中常用的 class：

  • .pure-table: 用来应用表格的基础样式。
  • .pure-table-striped: 用来应用带斑马线的表格样式。
  • .pure-table-bordered: 用来应用带边框的表格样式。
  • .pure-table-horizontal: 用来应用水平布局的表格样式。
结尾

Pure.css 是一款简易的框架，无需繁琐的配置，只需要按照它的类选择器添加样式即可快速地构建一个简约高效的网站。但是，它并不是通用的，有些特殊的样式还是需要自己编写代码实现。