雅虎Pure CSS网格使用指南

Pure是一款简洁实用的CSS框架。由于目前网络上关于Pure的资料较少，我将分享一些使用过程中的经验与心得，希望能帮助大家更好地理解和应用，相信阅读本文后，你也会喜欢上这个轻量高效的框架。

1、 下载纯CSS文件。

2、 在purecss.io官网首页可获取Pure的下载链接，既可将CSS文件下载至本地使用，也可直接引用雅虎提供的在线文件。本教程为方便起见，将采用引用在线CSS文件的方式进行演示与讲解。

3、 掌握纯网格布局原理。

4、 不了解网格系统的人可自行搜索了解。简单来说，网格系统就是将网页横向划分为若干等分的区域，如同表格一样，便于将内容整齐地放置在各个单元格中，提升页面布局的规范性与美观度。

5、 pure网格系统提供5列与24列布局，主要包含pure-g和pure-u-*两类样式。

6、 pure-g 是一种网格布局样式，通过在 div 标签中添加 class=pure-g 即可创建网格结构，实现页面的响应式布局设计。

7、 pure-u-* 是用于定义网格单元的样式类，所有内容需置于单元格内。如 pure-u-1-2 表示占据容器宽度的一半，pure-u-2-3 表示占据三分之二宽度，具体布局效果所示。

8、 准备HTML页面

9、 后续教程均以该测试页面为例，建议你以此HTML页面进行练习操作。

10、 纯粹引用，内容简洁明了。

11、 设定颜色以直观显示各模块所在区域

12、 设置元素最小高度为500像素，用于页面布局占位。

13、 设置最小高度为50像素，用于预留空间位置。

14、 设置最小高度为100像素，用于页面元素占位。

15、 设置最小高度为200像素，用于预留空间位置。

16、 为元素添加3像素的外边距以增加间距。

17、 设置主体最大宽度为1000像素，水平居中显示，外边距上下为0，左右自动适应。

18、 引入pure-g样式以优化布局

19、 从简单开始，实现常见的左内容右栏布局，首先引入pure-g样式，构建基本结构。

20、 设定单元格。

21、 页面总宽设为1000px，侧边栏宽度设定为300px，恰好占整个页面宽度的三分之一比例。

22、 侧边栏内容展示

23、 为内容添加适当边距

24、 为提升页面视觉效果，需为左右内容添加适当间距。需特别注意，margin与padding样式不可与pure-u-*类同时作用于同一标签，否则将导致Pure网格系统显示异常，影响布局效果。

25、 侧边栏内容区域

26、 复杂结构布局

27、 在实际应用中，界面布局远不止简单的左右两栏。下面我们以百度经验首页的某个栏目为例，演示一个较为复杂的布局设计，所示，即为最终实现的效果。

28、 页面分析

29、 复杂布局可分解为多个简单部分，该界面明显划分为四个主要区域，具体分布所示。

30、 完成整体架构

31、 接下来我们将实现之前步骤中标注的四个模块，具体代码如下所示。可以看出，即便面对较为复杂的页面布局，使用 Pure 框架也能让结构清晰、逻辑分明，维护和调整都非常方便。例如，若想将区域4由每行显示四张图片改为五张，只需将类名 pure-u-1-4 修改为 pure-u-1-5 即可。而区域1和区域2中的内容也可通过进一步嵌套网格进行排版设计，这部分作为练习留给读者自行尝试，此处不再展开详述。

32、 重新表述如下：

33、 地区一

34、 区域二，布局清晰，功能明确，空间利用高效，环境舒适宜人。

35、 区域三，位于页面中部偏右位置，背景色为浅灰，内边距适中。

36、 区域四，位于页面布局中的第四部分，具有特定的样式与间距设计。

37、 区域四，位于页面中央，背景浅灰，内边距适中，文字居中显示。

38、 区域四，位于页面右侧，内容以图文展示为主，布局清晰分明。

39、 区域四，位于页面布局的第四部分，具有特定样式与间距设计。

40、 侧边栏内容