Pure.CSS環(huán)境設置
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文件直接包含在內容分發(fā)網絡（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
以上內容是否對您有幫助：
更多建議：