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>

它将产生以下结果 −