Pure CSS 網格系統簡單介紹

09-24

Pure CSS 網格系統簡單介紹

4 人贊了文章

美國雅虎公司出品的一組輕量級、響應式純css模塊，適用於任何Web項目。

Pure是一個簡單、實用的CSS框架，鑒於目前網上對pure的資料比較少，所以我想把使用pure的一些經驗介紹給大家。

Pure包含多個模塊：Base(基本樣式)、Grids(網格系統)、Forms(表單)、Buttons(按鈕)、Tables(表格)、Menus(菜單)，本文主要介紹如何使用Grids（網格系統）。

1、準備Pure CSS 框架

獲取Pure CSS。

在官網http://purecss.io首頁可以找到Pure的下載地址，你可以把Pure的css文件下載到本地，也可以直接引用雅虎的css文件。

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

2、了解pure網格系統。

pure的網格系統支持5格和24格，主要有兩種樣式：pure-g和pure-u-*

1、pure-g，網格樣式，例如<div class="pure-g"></div>這樣就實現了一個網格

2、pure-u-*，單元格樣式，網格里的內容必須放在網格單元里。例如pure-u-1-2表示單元格佔1/2的寬度、pure-u-2-3表示單元格佔2/3的寬度，如下圖所示

柵格單元格大小

基於5列的單元格

基於24列的單元格

3、一個小Demo

<!DOCTYPE HTML><html><head>  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/grids-min.css"> <style type="text/css"> /*定義一些顏色，以便看到各模塊的位置*/ .c1{background-color: #1abc9c;color:#FFF;} .c2{background-color: #2980b9;color:#FFF;} .c3{background-color: #8e44ad;color:#FFF;} .c4{background-color: #f39c12;color:#FFF;} .c5{background-color: #c0392b;color:#FFF;} .c6{background-color: #999999;color:#FFF;} .ph-500{min-height: 500px;}/*用於佔位*/ .ph-50{min-height: 50px;}/*用於佔位*/ .ph-100{min-height: 100px;}/*用於佔位*/ .ph-200{min-height: 200px;}/*用於佔位*/ .mg{margin: 3px;}/*增加邊距*/ .main{max-width: 1000px;margin: 0 auto;}/*頁面主體*/ </style></head><body> <div class="main"> </div></body></html>

從簡單的開始

實現一個常見的左右結構，即左邊內容+右側邊欄。先添加一個pure-g樣式

<div class="main pure-g"></div>

定義單元格。

我們要求側邊欄寬度是300px，由於前面定義了頁面寬度是1000px，因此側邊欄占頁面寬度的1/3。

<div class="main pure-g"><div class="pure-u-2-3"> <div class="c1 ph-500">  </div> </div> <div class="pure-u-1-3"> <div class="c3 ph-500">  </div> </div></div>

給內容增加邊距。

為了頁面更美觀，需要給左右兩側的內容增加間距。這裡需要注意的是，設置margin、padding的樣式不能跟pure-u-*的樣式同時應用在同一個標籤里，否則pure的網格系統會出現異常。

<div class="main pure-g"> <div class="pure-u-2-3"> <div class="c1 ph-500 mg">  </div> </div> <div class="pure-u-1-3"> <div class="c3 ph-500 mg">  </div> </div></div>

就是這樣啦

4、一個稍微複雜的Demo

css還是不變

簡單吧