个性化阅读
专注于IT技术分析

如何使用Pure.CSS

本文概述

有两种使用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="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 如何使用Pure.CSS 1

使用基于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>

立即测试

输出

它将显示如下结果:

Pure.CSS 如何使用Pure.CSS 2

你可以看到这是相同的示例, 但是使用了另一种方法。

赞(0) 打赏
未经允许不得转载:srcmini » 如何使用Pure.CSS
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏