Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）
（转自百度经验）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）的更多相关文章
- 不用bootstrap，只用CSS创建网格布局
本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- css - Grid网格布局
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...
- CSS中网格布局实战（初级）
大家好,网格布局是我们在网页布局中经常用到的,那这里我就给大家分享一篇简单的网格布局,让大家能简单明了的了解网格布局的基本内容.闲话不多说,直接进入主题! 第一步,基本的框架结构.这里直接一个div来 ...
- css grid 网格布局
前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...
- 转:Bootstrap研究 精巧的网格布局系统
本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...
随机推荐
- python splinter chromedriver下载地址(国内可用)
http://chromedriver.storage.googleapis.com/index.html
- HTML——列表的相关知识
核心知识点: 1.无序列表: ul>li 2.有序列表:ol>li 3.标题列表:dl(标签)>dt(标题)>dd(选项) 4.表格:table>thead(>tr ...
- P4474 王者之剑
P4474 王者之剑 题目大意 n*m的带权网格,任意选择起点开始时刻为0秒.以下操作,每秒按顺序执行 在第i秒开始的时候,在方格(x,y)上,获得(x,y)的值 在偶数秒,周围四格的值清零 每秒可选 ...
- python环境的caffe配置
基本按照这个教程来 http://blog.csdn.net/zb1165048017/article/details/52980102 步骤 安装Anaconda2,去官网上下载,注意下载对应自己p ...
- git 生成patch和应用patch【转】
本文转载自:http://www.jianshu.com/p/814fb6606734 1.在git源码目录下执行 1.1.两个commit间的修改(包含两个commit) git format-pa ...
- 虚拟化网络之OpenvSwitch
OpenvSwitch简称OVS,官网(http://openvswitch.org/) OVS是一个高质量.多层的虚拟交换软件,即虚拟交换机. OpenvSwitch的见的相关组件: ovs-vsw ...
- Oracle约束的使用
--5个约束,主键约束.外键约束.唯一约束.检查约束.非空约束. --添加主键约束 Alter table table_name Add constraints constraint_name Pri ...
- 分享知识-快乐自己：Linux—jdk 安装步骤
1.查看现有版本:java -version 2.查看jdk的具体版本: rpm -qa| grep jdk || rpm -qa| grep gcj 3.删除已安装jdk包: rpm -e --no ...
- Centos7配置https，及多个https配置
Centos7.2配置https,及多个https配置 1.单个https配置 检查相关依赖,如果没有就yum安装 yum install mod_ssl openssl rpm -qa| grep ...
- java异常的原理以及应用
父类Throwable 两个分支: error:合理的应用程序不应该出现的严重问题,可以无需声明便抛出,比如内存溢出. Exception:程序还能够克服和恢复的问题. 其中又分为系统异常和普通异常. ...