免費(fèi)AI編程助手
Pure.CSS教程
2018-12-21 16:41 更新
Pure.CSS教程
Pure是YAHOO開發(fā)的級聯(lián)樣式表（CSS）。 它有助于創(chuàng)建更快，更美觀，更靈敏的網(wǎng)站。 它是非常空間精明，是非常小的,相當(dāng)于4 KB。
受眾
本教程面向希望學(xué)習(xí)Pure的基礎(chǔ)知識以及如何使用它來創(chuàng)建更快，更美觀，更靈敏的網(wǎng)站的專業(yè)人員。 本教程解釋了Pure的所有基本概念。
先決條件
在繼續(xù)學(xué)習(xí)本教程之前，您應(yīng)該對HTML，CSS，JavaScript，文檔對象模型（DOM）和任何文本編輯器有基本的了解。此外，如果您了解基于Web的應(yīng)用程序是如何工作的，這將對您（學(xué)習(xí)本教程）有所幫助。
在線執(zhí)行pure
對于本教程中給出的大多數(shù)示例，您將找到一個Try-it選項(xiàng)。 那么使用此選項(xiàng)立即執(zhí)行您的Pure程序，并享受您的學(xué)習(xí)吧。<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>
以上內(nèi)容是否對您有幫助：
更多建議：