（转自百度经验）http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html

Pure是一个简单、实用的CSS框架，鉴于目前网上对pure的资料比较少，所以我想把使用pure的一些经验介绍给大家，相信你看完本文后也会爱上pure。

Pure包含多个模块：Base(基本样式)、Grids(网格系统)、Forms(表单)、Buttons(按钮)、Tables(表格)、Menus(菜单)，本文主要介绍如何使用Grids（网格系统）。

1.获取Pure CSS。

在官网purecss.io首页可以找到Pure的下载地址，你可以把Pure的css文件下载到本地，也可以直接引用雅虎的css文件。本文作为教程就直接使用在线的css文件。

2.了解pure网格系统。

不知道网格系统的朋友可以去百度，我这里简单说一下：所谓的网格系统就是把网页横向划分成N格，类似一个Excel表格，这样网页内容就能放在这些格格里面。

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的宽度，如下图所示

3.准备html页面。后面的教程都是使用该测试页面做演示，建议你基于这个html页面做练习。

<!DOCTYPE HTML>

<html>

<head>

<!--引用pure-->

<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>

4.从简单开始，实现左右结构

添加pure-g样式我们先从简单的入手，实现一个常见的左右结构，即左边内容+右侧边栏。先添加一个pure-g样式<div class="main pure-g"></div>

5.定义单元格。

我们要求侧边栏宽度是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>

6.给内容增加边距。

为了页面更美观，需要给左右两侧的内容增加间距。这里需要注意的是，设置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>

7.嵌套使用网格，构造复杂布局

一个复杂布局。

显示应用中，布局当然不会只有左右两栏这么简单。接下来我们就以百度经验首页的一个栏目为例子做一个复杂的布局。下图就是我们要实现的效果

8.分析页面

任何复杂的布局都可以拆分为若干个简单的布局，可以分析出这个界面有4大区域，如图所示：

9.实现大体布局

现在我们先来实现上一个步骤里标出的4个模块，实现代码如下。可以看出就算是复杂的布局，用pure实现起来也是清晰明了，修改起来也很简单。比如区域4想改成一行显示5张图片，只需要把pure-u-1-4改成pure-u-1-5。至于区域1和区域2里的内容页可以继续嵌套网格来排版，这个留给读者做练习，我这里就不细说了。

<div class="main pure-g">

<div class="pure-u-2-3">

<div class="c1 ph-500 mg">

<!--内容-->

<div class="pure-g">

                    <div class="pure-u-1-2">

                        <div class="c2 ph-200 mg">区域1</div>

                    </div>

                    <div class="pure-u-1-2">

                        <div class="c4 ph-200 mg">区域2</div>

                    </div>

                    <div class="pure-u-1">

                        <div class="c5 ph-50 mg">区域3</div>

                    </div>

                    <div class="pure-u-1-4">

                        <div class="c6 ph-100 mg">区域4</div>

                    </div>

                    <div class="pure-u-1-4">

                        <div class="c6 ph-100 mg">区域4</div>

                    </div>

                    <div class="pure-u-1-4">

                        <div class="c6 ph-100 mg">区域4</div>

                    </div>

                    <div class="pure-u-1-4">

                        <div class="c6 ph-100 mg">区域4</div>

                    </div>

                </div>

</div>

</div>

<div class="pure-u-1-3">

<div class="c3 ph-500 mg">

<!--侧边栏-->

</div>

</div>

</div>

另外分享一个中文翻译的pure网站http://pure-site.ap01.aws.af.cm/

不过是0.3.0的版本，现在的0.6.0（2015/5/4），这是css UI比bootstrap小，压缩后只有6kb

Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）的更多相关文章

  1. 不用bootstrap，只用CSS创建网格布局

    本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...

  2. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  3. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  4. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  5. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  6. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

  7. CSS中网格布局实战（初级）

    大家好,网格布局是我们在网页布局中经常用到的,那这里我就给大家分享一篇简单的网格布局,让大家能简单明了的了解网格布局的基本内容.闲话不多说,直接进入主题! 第一步,基本的框架结构.这里直接一个div来 ...

  8. css grid 网格布局

    前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...

  9. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

随机推荐

  1. jQuery学习笔记(9)--jquery中的事件--$(document).ready()

    1.$(document).ready()方法是事件模块中最重要的一个函数,可以极大地提高web应用程序的相应速度. 2.执行时机:DOM就绪后就会执行,而javascript中window.onlo ...

  2. 性能测试--yslow

    YSlow YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会 ...

  3. python数据分析之：绘图和可视化

    在数据分析领域,最出名的绘图工具就是matlib.在Python同样有类似的功能.就是matplotlib.前面几章我们都在介绍数据的生成,整理,存储.那么这一章将介绍如果图形化的呈现这些数据.来看下 ...

  4. python 的print 用法

    print(x,y) 等价于 import sys sys.stdout.write(str(x) + ' ' +str(y) + '\n') 从语法上讲,调用python3.0 的print 函数有 ...

  5. Python正则表达式Cheat sheet

    1.来源: Python Regular Expressions Cheat Sheet 2.内容: Special Characters ^ | Matches the expression to ...

  6. Android 普通okhttp、okhttp utils执行 post get请求，文件上传下载、请求图片

    public class OKHttpActivity extends Activity implements View.OnClickListener { public static final M ...

  7. rocketmq安装

    1 安装Rocketmq https://my.oschina.net/daijunjian/blog/732560 2 可视化管理控台 http://blog.csdn.net/jayjjb/art ...

  8. 国画经典之梅花PSD素材

    国画经典之梅花图片PSD素材,由huiyi8素材网提供. 地址:http://www.huiyi8.com/meihua/​

  9. RQNOJ 95 多多看DVD(加强版)：01背包

    题目链接:https://www.rqnoj.cn/problem/95 题意: 叔叔要陪多多看动画片. 有n张DVD可以买,第i张碟的打分为w[i],播放时间为t[i]. 爷爷规定他们只能在一定的时 ...

  10. 使用google浏览器模拟手机终端的方法

    谷歌Chrome浏览器,可以很方便地用来当移动终端模拟器.在Windows的[开始]-->[运行]中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页,前提:将先前开启的谷 ...