Pure.CSS环境设置

2018-12-21 17:05 更新

如何使用PURE.CSS?

有两种使用pue的方式:

  • 本地安装 -您可以下载到本地计算机上的文件pure.css,它包含在HTML代码。

  • 基于CDN版本 - 您可以将pure.css文件直接包含在内容交付网络(CDN)中的HTML代码中。

本地安装

  • 转到http://purecss.io/start/~~V下载可用的最新版本。

  • 然后,把下载的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>

它将产生以下结果


First Column

Second Column

Third Column



基于CDN的版本

您可以将pure.css文件直接包含在内容分发网络(CDN)中的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>

这将产生以下结果 -

First Column

Second Column

Third Column



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号