Pure.CSS - 快速指南
Pure.CSS - 概述
Pure 是由 YAHOO 开发的层叠样式表 (CSS)。它有助于创建更快、更美观、响应更快的网站。
其一些显著特点如下 −
- 内置响应式设计
- 占用空间最小的标准 CSS
- 一组小型、响应式 CSS 模块
- 免费使用
响应式设计
Pure 具有内置响应式设计,使用 Pure 创建的网站将根据设备尺寸自行重新设计。 Pure 具有 12 列移动优先流体网格,支持小、大和中屏幕尺寸的响应式类。
Pure 类的创建方式使网站可以适应任何屏幕尺寸。使用 Pure 创建的网站与 PC、平板电脑和移动设备完全兼容。
标准 CSS
Pure 仅使用标准 CSS,非常容易学习。不依赖任何外部 JavaScript 库,例如 jQuery。
可扩展
Pure 在设计上非常简约和扁平。它的设计考虑到添加新的 CSS 规则比覆盖现有的 CSS 规则要容易得多。通过添加几行 CSS,可以自定义 Pure 的外观以与现有的 Web 项目配合使用。
它支持阴影和粗体颜色。颜色和阴影在各种平台和设备上保持一致。最重要的是,它完全免费使用。
Pure.CSS - 环境设置
有两种方法可以使用 Pure −
本地安装 − 您可以在本地机器上下载 pure.css 文件并将其包含在 HTML 代码中。
基于 CDN 的版本 −您可以直接从内容分发网络 (CDN) 将 pure.css 文件包含到您的 HTML 代码中。
本地安装
转到 https://purecss.io/start/ 下载最新版本。
将下载的 pure-min.css 文件放在您网站的目录中,例如 /css。
示例
您可以按如下方式将 css 文件包含到您的 HTML 文件中 −
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-3"><p>First Column</p></div>
<div class="pure-u-1-3"><p>Second Column</p></div>
<div class="pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>
它能够产生以下结果 −
基于 CDN 的版本
您可以直接从内容分发网络 (CDN) 将 pure.css 文件包含到 HTML 代码中。yui.yahooapis.com 提供最新版本的内容。
我们在本教程中一直使用 yui.yahooapis.com CDN 版本的库。
示例
现在让我们使用来自 PureCSS.io CDN 的 pure.css 重写上述示例。
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3"><p>First Column</p></div>
<div class = "pure-u-1-3"><p>Second Column</p></div>
<div class = "pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>
它将产生以下结果 −
Pure.CSS - 响应式设计
Pure.CSS 有几个特殊类可用于创建响应式设计。
| Sr.No. | 类名 &描述 |
|---|---|
| 1 | .pure-u-* 设置容器以在任何设备上占据所需空间。 |
| 2 | .pure-u-sm-* 设置容器以在宽度 ≥ 568px 的设备上占据所需空间。 |
| 3 | .pure-u-md-* 设置容器以在宽度 ≥ 的设备上占据所需空间768px。 |
| 4 | .pure-u-lg-* 设置容器以在宽度 ≥ 1024px 的设备上占据所需空间。 |
| 5 | .pure-u-xl-* 设置容器以在宽度 ≥ 1280px 的设备上占据所需空间。 |
在下面的示例中,我们将创建一个响应式网格,其中一行有四列。列应在小屏幕上堆叠,在中型屏幕上应占用宽度:50%,在大屏幕上应占用宽度:25%。
这是通过为小屏幕添加 .pure-u-1 类、为中型屏幕添加 .pure-u-md-1-2 和为大屏幕添加 .pure-u-lg-1-4 来实现的。调整页面大小以查看网格对屏幕尺寸的响应。
示例
purecss_responsive_design.htm
<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.graybox {
background: rgb(240, 240, 240);
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-1">
<div class = "graybox">
<p>These four columns should stack on small screens,
should take up width: 50% on medium-sized screens, and should
take up width: 25% on large screens.</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>First Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Second Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Third Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>Fourth Column</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1">
<div class = "graybox">
<p>This column is to occupy the complete space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-2-5">
<div class = "graybox">
<p>This column is to occupy the two-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-3-5">
<div class = "graybox">
<p>This column is to occupy the three-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 1: This column is to occupy the one-third of the
space of a row on all devices.</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 2: This column is to occupy the one-third of the space
of a row on all devices.</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 3: This column is to occupy the one-third of the space of a
row on all devices.</p>
</div>
</div>
</div>
</div>
</body>
</html>
结果
验证结果。
Pure.CSS - 网格
Pure.CSS 提供了 Pure Grid 的概念,其中包含两种类型的类:pure-g(网格类)和单元类 pure-u-*。以下是使用 Pure Grid 的规则。
单元的宽度以分数表示。例如,pure-u-1-2 表示 1/2 或 50% 宽度,pure-u-2-5 表示 2/5 或 40% 宽度,依此类推。
Pure Grid 的子元素(具有 pure-g 类的元素)必须使用 pure-u 或 pure-u-* 类名。
所有内容都应是网格单元的一部分才能正确呈现。
网格单元大小
Pure Grid 带有第 5 和第 24 个单元大小。下图显示了一些可用单元的示例,这些单元可以附加到 pure-ui-。例如,要创建宽度为 50% 的单元格,可以使用 css 样式 pure-ui-1-2。
5th 基础单位
purecss_5th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">2-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-2-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">3-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-3-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">4-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-4-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
</div>
</body>
</html>
结果
验证结果。
24th 基础单位
purecss_24th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-12</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-12"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">2-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-2-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">3-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-3-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-8</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-8"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">4-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-4-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-6</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-6"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">5-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-5-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-4</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-4"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">6-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-6-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">7-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-7-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-3</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-3"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">22-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-22-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">23-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-23-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1</div>
<div class ="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">24-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-24-24"></div>
</div>
</div>
</div>
</div>
</body>
</html>
结果
验证结果。
Pure.CSS - 表单
Pure.CSS 拥有非常漂亮且响应迅速的 CSS,可用于表单设计。以下 CSS 用于 −
| Sr.No. | 类名 &描述 |
|---|---|
| 1 | pure-form 表示紧凑的内联表单。 |
| 2 | pure-form-stacked 表示输入元素位于标签下方的堆叠表单。与 pure-form 一起使用。 |
| 3 | pure-form-aligned 表示输入元素位于标签下方的对齐表单。与 pure-form 一起使用。 |
| 4 | pure-input-rounded 显示带圆角的表单控件 |
| 5 | pure-button 美化按钮。 |
| 6 | pure-checkbox 美化复选框。 |
| 7 | pure-radio 美化收音机。 |
示例
purecss_forms.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form class = "pure-form pure-form-aligned">
<fieldset>
<div class = "pure-control-group">
<label for = "name">Username</label>
<input id = "name" type = "text" placeholder = "Username" required>
</div>
<div class = "pure-control-group">
<label for = "email">Email</label>
<input id = "email" type = "text" placeholder = "Email Address" required>
</div>
<div class = "pure-control-group">
<label for = "comments">Comments</label>
<input id = "comments" type="text" placeholder = "Comments">
</div>
<div class = "pure-controls">
<label for = "married" class = "pure-checkbox">
<input id = "married" type = "checkbox" checked = "checked">
Married
</label>
<br>
<label for = "single" class = "pure-checkbox">
<input id = "single" type = "checkbox">
Single
</label>
<br>
<label for = "dontknow" class = "pure-checkbox">
<input id = "dontknow" type = "checkbox" disabled>
Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class = "pure-controls">
<label for = "male" class = "pure-radio">
<input id = "male" type = "radio" name = "gender" value = "male" checked>
Male
</label>
<br>
<label for = "female" class= "pure-radio">
<input id = "female" type = "radio" name = "gender" value = "female">
Female
</label>
<br>
<label for = "dontknow1" class = "pure-radio">
<input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
Don't know (Disabled)
</label>
<button type = "submit" class = "pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
结果
验证结果。
Pure.CSS - 按钮
Pure.CSS 具有非常漂亮且响应迅速的 CSS,可用于自定义按钮的外观。使用以下 CSS −
| Sr.No. | 类名和说明 |
|---|---|
| 1 | pure-button 表示标准按钮。也可用于设置链接和按钮的样式。 |
| 2 | pure-button-disabled 表示已禁用的按钮。与 pure-button 一起使用。 |
| 3 | pure-button-active 表示已按下的按钮。与 pure-button 一起使用。 |
示例
purecss_buttons.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
.success,
.error,
.warning,
.secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.success {
background: rgb(28, 184, 65); /* green */
}
.error {
background: rgb(202, 60, 60); /* maroon */
}
.warning {
background: rgb(223, 117, 20); /* orange */
}
.secondary {
background: rgb(66, 184, 221); /* light blue */
}
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<h2>Standard Buttons</h2>
<button class = "pure-button">Click Me</button>
<button class = "pure-button pure-button-active">Click Me</button>
<button class = "pure-button pure-button-disabled">I am disabled</button>
<h2>Links as Buttons</h2>
<a class = "pure-button">Link</a>
<a class = "pure-button pure-button-active">Link</a>
<a class = "pure-button pure-button-disabled">Disabled Link</a>
<h2>Primary Button</h2>
<a class = "pure-button pure-button-primary">Submit</a>
<h2>Customized button</h2>
<button class = "pure-button success">Success</button>
<button class = "pure-button error">Error</button>
<button class = "pure-button warning">Warning</button>
<button class = "pure-button secondary">Secondary</button>
<h2>Different Sized button</h2>
<button class = "pure-button xsmall">Extra Small</button>
<button class = "pure-button small">Small</button>
<button class = "pure-button large">Large</button>
<button class = "pure-button xlarge">Extra Large</button>
</body>
</html>
结果
验证结果。
Pure.CSS - 表格
Pure.CSS 可用于在 pure-table 上使用各种样式显示不同类型的表格
| Sr.No. | 类名 &描述 |
|---|---|
| 1 | pure-table 表示具有任何默认填充、边框和强调标题的基本表格。 |
| 2 | pure-table-bordered 绘制带有跨行边框的表格。 |
| 3 | pure-table-horizontal 绘制带有水平线的表格行。 |
| 4 | pure-table-striped 显示带条纹的表格。 |
| 5 | pure-table-odd 如果应用于其他每个 tr,则更改行的背景并创建斑马线样式的效果。 |
示例
purecss_tables.htm
<html>
<head>
<title>The PURE.CSS Tables</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table class = "pure-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Bordered Table</h3>
<table class="pure-table pure-table-bordered">
<thead>
<tr><
th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Table with Horizontal Borders</h3>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table</h3>
<table class = "pure-table pure-table-striped">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
结果
验证结果。
Pure.CSS - 图片
Pure.CSS 提供使用 pure-image 作为主类以响应方式显示图片的选项。
| Sr.No. | 类名和说明 |
|---|---|
| 1 | pure-img 表示没有任何边框的基本样式图片。图片会随着内容保持正确比例而增大和缩小。 |
示例
purecss_images.htm
<html>
<head>
<title>The W3.CSS Images</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Images Demo</h2>
<hr/>
<div class = "pure-g">
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
</div>
</body>
</html>
结果
验证结果。
Pure.CSS - 图标
Pure.CSS 支持以下流行的图标库 −
- Font Awesome 图标
- Google Material 图标
- Bootstrap 图标
用法
要使用图标,请将图标名称放在 HTML <i> 元素的类中。
示例
purecss_icons.htm
<html>
<head>
<title>The PURE.CSS Icons</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud xsmall"></i>
<i class = "fa fa-cloud small"></i>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud large"></i>
<i class = "fa fa-cloud xlarge"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons xsmall">cloud</i>
<i class = "material-icons small">cloud</i>
<i class = "material-icons large">cloud</i>
<i class = "material-icons xlarge">cloud</i>
<i class = "material-icons">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud xsmall"></i>
<i class = "glyphicon glyphicon-cloud small"></i>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "glyphicon glyphicon-cloud large"></i>
<i class = "glyphicon glyphicon-cloud xlarge"></i>
<h3>Button with Icon Demo</h3>
<button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
<a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
</body>
</html>
结果
验证结果。

