
Pure.CSS - 環境設定
使用 Pure 的方法有兩種 -
本地安裝 - 可以在本地計算機上下載 pure.css 檔案,並將其包含在 HTML 程式碼中。
基於 CDN 的版本 - 可以直接從內容分發網路 (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>
會生成以下結果 -
基於 CDN 的版本
可以直接從內容分發網路 (CDN) 將 pure.css 檔案包含在 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>
會生成以下結果 -
廣告