Pure.CSS教程:环境设置

有两种使用Pure的方法:

  • 本地安装-您可以在本地计算机上下载pure.css文件,并将其包含在HTML代码中。
  • 基于CDN的版本-您可以直接从Content Delivery Network(CDN)将pure.css文件包含到HTML代码中。

本地安装

  • 转到https://purecss.io/start/下载可用的最新版本。
  • 将下载的pure-min.css文件放在您网站的目录中,例如/ css。

例子

您可以在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 #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>

作者:terry,如若转载,请注明出处:https://www.web176.com/purecss/2264.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月2日 上午11:06
下一篇 2021年4月2日 上午11:09

相关推荐

发表回复

登录后才能评论