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).本文讨论第一种 ...
随机推荐
- iOS 设置字体样式
1.iOS设置字体样式 label.font = [UIFont fontWithName:@"Arial-BoldItalicMT" size:24]; 字体名如下: F ...
- An Overview of Query Optimization in Relational Systems
An Overview of Query Optimization in Relational Systems
- mysql系列之8.mysql高可用 (keepalived)
环境: centos6.5_x64 准备: 两台mysql机器 主1 master: 192.168.32.130 主2 backup: 192.168.32.131 VIP: 192.168.3 ...
- sprint-boot @ComponentScan扫描多个包
使用@ComponentScan扫描多个包时, @ComponentScan({"ka","com"}) 注意包名不能为org,不然无法启动
- Swift 烧脑体操（二） - 函数的参数
前言 Swift 其实比 Objective-C 复杂很多,相对于出生于上世纪 80 年代的 Objective-C 来说,Swift 融入了大量新特性.这也使得我们学习掌握这门语言变得相对来说更加困 ...
- 在Spring中基于JDBC进行数据访问时如何控制超时
超时分类 超时根据作用域可做如下层级划分: Transaction Timeout > Statement Timeout > JDBC Driver Socket Timeout Tra ...
- P4474 王者之剑
P4474 王者之剑 题目大意 n*m的带权网格,任意选择起点开始时刻为0秒.以下操作,每秒按顺序执行 在第i秒开始的时候,在方格(x,y)上,获得(x,y)的值 在偶数秒,周围四格的值清零 每秒可选 ...
- 使用pidof/kill组合命令,变相解决mediaserver内存泄漏【转】
本文转载自:https://blog.csdn.net/lj402159806/article/details/78950384 在5.1系统下mediaserver有内存泄漏的问题,原因在于使用ca ...
- html5--2.10综合实例2-移动端页面练习
html5--2.10综合实例2-移动端页面练习 学习要点 通过一个简单的移动手机页面,复习学过的内容 手机网页的测试 手机布局的屏幕设定 手机网页的测试方法 直接在手机上测试,比较麻烦,效果好 电脑 ...
- numpy中的tile函数
tile()函数可以很方便的生成多维数组.它有两个参数,第一个数是原始数组;第二个表示如何来生成,第一个数字表示生成几行,第二个表示每行有多少个原始数组(如果只写一个数字,那么就默认是一行). fro ...