如何使用Pure.CSS

本文概述

本地安装Pure.CSS
使用基于CDN的版本

有两种使用Pure.CSS的方法：

本地安装Pure.CSS
使用基于CDN的版本

本地安装Pure.CSS 你可以从以下位置下载系统上最新版本的pure.css文件：https://purecss.io/start/并将其包含在HTML代码中。
例子
让我们看看如何在HTML文件中包含CSS文件。

< html> < head> < title> The PURE.CSS Example< /title> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://www.srcmini.com/pure-min.css"> < style> .grids-example { background: rgb(250, 250, 250); margin: 2em auto; border-top: 1px solid red; border-bottom: 1px solid black; 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】立即测试
输出

文章图片
使用基于CDN的版本你可以从Content Delivery Network(CDN)将pure.css文件直接添加到HTML页面。 yui.yahooapis.com提供最新版本的内容。
Or
你可以通过免费的unpkg CDN将Pure添加到页面。只需在项目的样式表之前, 将以下< link> 元素添加到页面的< head> 中即可。

< link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

在以下示例中, 让我们使用该库的yui.yahooapis.com CDN版本。用第二种方式重写上面的示例。
例子

< 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 red; border-bottom: 1px solid black; 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>

立即测试
输出
它将显示如下结果：