如何使用 Pure.CSS

17 Mar 2025 | 阅读 2 分钟

使用 Pure.CSS 有两种方法

本地安装
使用基于 CDN 的版本

本地安装

您可以从此处下载 pure.css 文件的最新版本到您的系统：https://purecss.npmjs.net.cn/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> 

立即测试

输出

使用基于 CDN 的版本

您可以直接从内容分发网络 (CDN) 将 pure.css 文件添加到您的 HTML 页面。 yui.yahooapis.com 提供最新版本的内容。

或

您可以通过免费的 unpkg CDN 将 Pure 添加到您的页面。只需将以下 <link> 元素添加到您页面的 <head> 中，在您项目的样式表之前。

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
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

本地安装

使用基于 CDN 的版本

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PureCSS 教程

Pure.CSS 输入框

Pure.CSS 表单

Pure.CSS 表格

面试题

如何使用 Pure.CSS

本地安装

使用基于 CDN 的版本

相关帖子

Pure.CSS 菜单

Pure.CSS 按钮

Pure.CSS 网格

PureCSS 教程

Pure.CSS 下拉菜单

Pure.CSS 响应式

Pure.CSS 图片

Pure.CSS 图标

什么是 Pure.CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器