(转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.htmlPure是一个简单、实用的CSS框架,鉴于目前网上对pure的资料比较少,所以我想把使用pure的一些经验介绍给大家,相信你看完本文后也会爱 ...
(转自百度经验)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 ></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 > </div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:Pure CSS 的网格布局(比bootstrap小很多且易扩展的css UI)
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。