grid-css

.fil-container {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

.fil-wrap {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

.fil-container:before, .fil-container:after, .fil-clear:before,
.fil-clear:after, .fil-wrap:before, .fil-wrap:after, .fil-row:before,
.fil-row:after {
content: " ";
display: table;
}

.fil-container:after, .fil-clear:after, .fil-wrap:after, .fil-row:after
{
clear: both;
}

.fil-row {
margin-left: -15px;
margin-right: -15px;
}

.fil-column, .fil-columns {
position: relative;
padding-left: 15px;
padding-right: 15px;;
float: left;
}

.fil-column, .fil-columns {
padding-left: 15px;
padding-right: 15px;
width: 100%;
float: left;
}

.fil-col {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.fil-col .fil-col{
padding-top: 0;
padding-bottom: 0;
}
.fil-xs-12 {
width: 100%;
}

.fil-xs-11 {
width: 91.666667%;
}

.fil-xs-10 {
width: 83.333333%;
}

.fil-xs-9 {
width: 75%;
}

.fil-xs-8 {
width: 66.666667%;
}

.fil-xs-7 {
width: 58.333333%;
}

.fil-xs-6 {
width: 50%;
}

.fil-xs-5 {
width: 41.666667%;
}

.fil--xs-4 {
width: 33.333333%;
}

.fil-xs-3 {
width: 25%;
}

.fil-xs-2 {
width: 16.666667%;
}

.fil-xs-1 {
width: 8.333333%;
}

.fil-xs-pull-12 {
right: 100%;
}

.fil-xs-pull-11 {
right: 91.666667%;
}

.fil-xs-pull-10 {
right: 83.333333%;
}

.fil-xs-pull-9 {
right: 75%;
}

.fil-xs-pull-8 {
right: 66.666667%;
}

.fil-xs-pull-7 {
right: 58.333333%;
}

.fil-xs-pull-6 {
right: 50%;
}

.fil-xs-pull-5 {
right: 41.666667%;
}

.fil-xs-pull-4 {
right: 33.333333%;
}

.fil-xs-pull-3 {
right: 25%;
}

.fil-xs-pull-2 {
right: 16.666667%;
}

.fil-xs-pull-1 {
right: 8.333333%;
}

.fil-xs-pull-0 {
right: auto;
}

.fil-xs-push-12 {
left: 100%;
}

.fil-xs-push-11 {
left: 91.666667%;
}

.fil-xs-push-10 {
left: 83.333333%;
}

.fil-xs-push-9 {
left: 75%;
}

.fil-xs-push-8 {
left: 66.666667%;
}

.fil-xs-push-7 {
left: 58.333333%;
}

.fil-xs-push-6 {
left: 50%;
}

.fil-xs-push-5 {
left: 41.666667%;
}

.fil-xs-push-4 {
left: 33.333333%;
}

.fil-xs-push-3 {
left: 25%;
}

.fil-xs-push-2 {
left: 16.666667%;
}

.fil-xs-push-1 {
left: 8.333333%;
}

.fil-xs-push-0 {
left: auto;
}

.fil-xs-offset-12 {
margin-left: 100%;
}

.fil-xs-offset-11 {
margin-left: 91.666667%;
}

.fil-xs-offset-10 {
margin-left: 83.333333%;
}

.fil-xs-offset-9 {
margin-left: 75%;
}

.fil-xs-offset-8 {
margin-left: 66.666667%;
}

.fil-xs-offset-7 {
margin-left: 58.333333%;
}

.fil-xs-offset-6 {
margin-left: 50%;
}

.fil-xs-offset-5 {
margin-left: 41.666667%;
}

.fil-xs-offset-4 {
margin-left: 33.333333%;
}

.fil-xs-offset-3 {
margin-left: 25%;
}

.fil-xs-offset-2 {
margin-left: 16.666667%;
}

.fil-xs-offset-1 {
margin-left: 8.333333%;
}

.fil-xs-offset-0 {
margin-left: 0%;
}

@media screen , projection {
.fil-container {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-wrap {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-container:before, .fil-container:after, .fil-clear:before,
.fil-clear:after, .fil-wrap:before, .fil-wrap:after, .fil-row:before,
.fil-row:after {
content: " ";
display: table;
}
.fil-container:after, .fil-clear:after, .fil-wrap:after, .fil-row:after
{
clear: both;
}
.fil-row:after {
visibility: hidden;
clear: both;
content: ".";
height: 0;
display: block;
}
.fil-row {
margin-left: -15px;
margin-right: -15px;
}
.fil-col {
position: relative;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.fil-xs-12 {
width: 100%;
}
.fil-xs-11 {
width: 91.666667%;
}
.fil-xs-10 {
width: 83.333333%;
}
.fil-xs-9 {
width: 75%;
}
.fil-xs-8 {
width: 66.666667%;
}
.fil-xs-7 {
width: 58.333333%;
}
.fil-xs-6 {
width: 50%;
}
.fil-xs-5 {
width: 41.666667%;
}
.fil--xs-4 {
width: 33.333333%;
}
.fil-xs-3 {
width: 25%;
}
.fil-xs-2 {
width: 16.666667%;
}
.fil-xs-1 {
width: 8.333333%;
}
.fil-xs-pull-12 {
right: 100%;
}
.fil-xs-pull-11 {
right: 91.666667%;
}
.fil-xs-pull-10 {
right: 83.333333%;
}
.fil-xs-pull-9 {
right: 75%;
}
.fil-xs-pull-8 {
right: 66.666667%;
}
.fil-xs-pull-7 {
right: 58.333333%;
}
.fil-xs-pull-6 {
right: 50%;
}
.fil-xs-pull-5 {
right: 41.666667%;
}
.fil-xs-pull-4 {
right: 33.333333%;
}
.fil-xs-pull-3 {
right: 25%;
}
.fil-xs-pull-2 {
right: 16.666667%;
}
.fil-xs-pull-1 {
right: 8.333333%;
}
.fil-xs-pull-0 {
right: auto;
}
.fil-xs-push-12 {
left: 100%;
}
.fil-xs-push-11 {
left: 91.666667%;
}
.fil-xs-push-10 {
left: 83.333333%;
}
.fil-xs-push-9 {
left: 75%;
}
.fil-xs-push-8 {
left: 66.666667%;
}
.fil-xs-push-7 {
left: 58.333333%;
}
.fil-xs-push-6 {
left: 50%;
}
.fil-xs-push-5 {
left: 41.666667%;
}
.fil-xs-push-4 {
left: 33.333333%;
}
.fil-xs-push-3 {
left: 25%;
}
.fil-xs-push-2 {
left: 16.666667%;
}
.fil-xs-push-1 {
left: 8.333333%;
}
.fil-xs-push-0 {
left: auto;
}
.fil-xs-offset-12 {
margin-left: 100%;
}
.fil-xs-offset-11 {
margin-left: 91.666667%;
}
.fil-xs-offset-10 {
margin-left: 83.333333%;
}
.fil-xs-offset-9 {
margin-left: 75%;
}
.fil-xs-offset-8 {
margin-left: 66.666667%;
}
.fil-xs-offset-7 {
margin-left: 58.333333%;
}
.fil-xs-offset-6 {
margin-left: 50%;
}
.fil-xs-offset-5 {
margin-left: 41.666667%;
}
.fil-xs-offset-4 {
margin-left: 33.333333%;
}
.fil-xs-offset-3 {
margin-left: 25%;
}
.fil-xs-offset-2 {
margin-left: 16.666667%;
}
.fil-xs-offset-1 {
margin-left: 8.333333%;
}
.fil-xs-offset-0 {
margin-left: 0%;
}
}

@media ( min-width : 40em) {
.fil-container {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-wrap {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-container:before, .fil-container:after, .fil-clear:before,
.fil-clear:after, .fil-wrap:before, .fil-wrap:after, .fil-row:before,
.fil-row:after {
content: " ";
display: table;
}
.fil-container
:after
,
.fil-clear
:after
,
.fil-wrap
:after
,
.fil-row
:after
,
{
clear
:

both
;

}

.fil-row {
margin-left: -15px;
margin-right: -15px;
}

.fil-col {
position: relative;
float: left;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

.fil-sm-12 {
width: 100%;
}

.fil-sm-11 {
width: 91.666667%;
}

.fil-sm-10 {
width: 83.333333%;
}

.fil-sm-9 {
width: 75%;
}

.fil-sm-8 {
width: 66.666667%;
}

.fil-sm-7 {
width: 58.333333%;
}

.fil-sm-6 {
width: 50%;
}

.fil-sm-5 {
width: 41.666667%;
}

.fil-sm-4 {
width: 33.333333%;
}

.fil-sm-3 {
width: 25%;
}

.fil-sm-2 {
width: 16.666667%;
}

.fil-sm-1 {
width: 8.333333%;
}

.fil-sm-pull-12 {
right: 100%;
}

.fil-sm-pull-11 {
right: 91.666667%;
}

.fil-sm-pull-10 {
right: 83.333333%;
}

.fil-sm-pull-9 {
right: 75%;
}

.fil-sm-pull-8 {
right: 66.666667%;
}

.fil-sm-pull-7 {
right: 58.333333%;
}

.fil-sm-pull-6 {
right: 50%;
}

.fil-sm-pull-5 {
right: 41.666667%;
}

.fil-sm-pull-4 {
right: 33.333333%;
}

.fil-sm-pull-3 {
right: 25%;
}

.fil-sm-pull-2 {
right: 16.666667%;
}

.fil-sm-pull-1 {
right: 8.333333%;
}

.fil-sm-pull-0 {
right: auto;
}

.fil-sm-push-12 {
left: 100%;
}

.fil-sm-push-11 {
left: 91.666667%;
}

.fil-sm-push-10 {
left: 83.333333%;
}

.fil-sm-push-9 {
left: 75%;
}

.fil-sm-push-8 {
left: 66.666667%;
}

.fil-sm-push-7 {
left: 58.333333%;
}

.fil-sm-push-6 {
left: 50%;
}

.fil-sm-push-5 {
left: 41.666667%;
}

.fil-sm-push-4 {
left: 33.333333%;
}

.fil-sm-push-3 {
left: 25%;
}

.fil-sm-push-2 {
left: 16.666667%;
}

.fil-sm-push-1 {
left: 8.333333%;
}

.fil-sm-push-0 {
left: auto;
}

.fil-sm-offset-12 {
margin-left: 100%;
}

.fil-sm-offset-11 {
margin-left: 91.666667%;
}

.fil-sm-offset-10 {
margin-left: 83.333333%;
}

.fil-sm-offset-9 {
margin-left: 75%;
}

.fil-sm-offset-8 {
margin-left: 66.666667%;
}

.fil-sm-offset-7 {
margin-left: 58.333333%;
}

.fil-sm-offset-6 {
margin-left: 50%;
}

.fil-sm-offset-5 {
margin-left: 41.666667%;
}

.fil-sm-offset-4 {
margin-left: 33.333333%;
}

.fil-sm-offset-3 {
margin-left: 25%;
}

.fil-sm-offset-2 {
margin-left: 16.666667%;
}

.fil-sm-offset-1 {
margin-left: 8.333333%;
}

.fil-sm-offset-0 {
margin-left: 0%;
}

}
@media ( min-width : 64em) {
.fil-container {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-wrap {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-container:before, .fil-container:after, .fil-clear:before,
.fil-clear:after, .fil-wrap:before, .fil-wrap:after, .fil-row:before,
.fil-row:after {
content: " ";
display: table;
}
.fil-container
:after
,
.fil-clear
:after
,
.fil-wrap
:after
,
.fil-row
:after
,
{
clear
:

both
;

}

.fil-row {
margin-left: -15px;
margin-right: -15px;
}

.fil-col {
position: relative;
float: left;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

.fil-md-12 {
width: 100%;
}

.fil-md-11 {
width: 91.666667%;
}

.fil-md-10 {
width: 83.333333%;
}

.fil-md-9 {
width: 75%;
}

.fil-md-8 {
width: 66.666667%;
}

.fil-md-7 {
width: 58.333333%;
}

.fil-md-6 {
width: 50%;
}

.fil-md-5 {
width: 41.666667%;
}

.fil-md-4 {
width: 33.333333%;
}

.fil-md-3 {
width: 25%;
}

.fil-md-2 {
width: 16.666667%;
}

.fil-md-1 {
width: 8.333333%;
}

.fil-md-pull-12 {
right: 100%;
}

.fil-md-pull-11 {
right: 91.666667%;
}

.fil-md-pull-10 {
right: 83.333333%;
}

.fil-md-pull-9 {
right: 75%;
}

.fil-md-pull-8 {
right: 66.666667%;
}

.fil-md-pull-7 {
right: 58.333333%;
}

.fil-md-pull-6 {
right: 50%;
}

.fil-md-pull-5 {
right: 41.666667%;
}

.fil-md-pull-4 {
right: 33.333333%;
}

.fil-md-pull-3 {
right: 25%;
}

.fil-md-pull-2 {
right: 16.666667%;
}

.fil-md-pull-1 {
right: 8.333333%;
}

.fil-md-pull-0 {
right: auto;
}

.fil-md-push-12 {
left: 100%;
}

.fil-md-push-11 {
left: 91.666667%;
}

.fil-md-push-10 {
left: 83.333333%;
}

.fil-md-push-9 {
left: 75%;
}

.fil-md-push-8 {
left: 66.666667%;
}

.fil-md-push-7 {
left: 58.333333%;
}

.fil-md-push-6 {
left: 50%;
}

.fil-md-push-5 {
left: 41.666667%;
}

.fil-md-push-4 {
left: 33.333333%;
}

.fil-md-push-3 {
left: 25%;
}

.fil-md-push-2 {
left: 16.666667%;
}

.fil-md-push-1 {
left: 8.333333%;
}

.fil-md-push-0 {
left: auto;
}

.fil-md-offset-12 {
margin-left: 100%;
}

.fil-md-offset-11 {
margin-left: 91.666667%;
}

.fil-md-offset-10 {
margin-left: 83.333333%;
}

.fil-md-offset-9 {
margin-left: 75%;
}

.fil-md-offset-8 {
margin-left: 66.666667%;
}

.fil-md-offset-7 {
margin-left: 58.333333%;
}

.fil-md-offset-6 {
margin-left: 50%;
}

.fil-md-offset-5 {
margin-left: 41.666667%;
}

.fil-md-offset-4 {
margin-left: 33.333333%;
}

.fil-md-offset-3 {
margin-left: 25%;
}

.fil-md-offset-2 {
margin-left: 16.666667%;
}

.fil-md-offset-1 {
margin-left: 8.333333%;
}

.fil-md-offset-0 {
margin-left: 0%;
}

}
@media ( min-width : 81.25em) {
.fil-container {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-wrap {
width: 100%;
max-width: 75rem;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.fil-container:before, .fil-container:after, .fil-clear:before,
.fil-clear:after, .fil-wrap:before, .fil-wrap:after, .fil-row:before,
.fil-row:after {
content: " ";
display: table;
}
.fil-container
:after
,
.fil-clear
:after
,
.fil-wrap
:after
,
.fil-row
:after
,
{
clear
:

both
;

}

.fil-row {
margin-left: -15px;
margin-right: -15px;
}

.fil-col {
position: relative;
float: left;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

.fil-lg-12 {
width: 100%;
}

.fil-lg-11 {
width: 91.666667%;
}

.fil-lg-10 {
width: 83.333333%;
}

.fil-lg-9 {
width: 75%;
}

.fil-lg-8 {
width: 66.666667%;
}

.fil-lg-7 {
width: 58.333333%;
}

.fil-lg-6 {
width: 50%;
}

.fil-lg-5 {
width: 41.666667%;
}

.fil-lg-4 {
width: 33.333333%;
}

.fil-lg-3 {
width: 25%;
}

.fil-lg-2 {
width: 16.666667%;
}

.fil-lg-1 {
width: 8.333333%;
}

.fil-lg-pull-12 {
right: 100%;
}

.fil-lg-pull-11 {
right: 91.666667%;
}

.fil-lg-pull-10 {
right: 83.333333%;
}

.fil-lg-pull-9 {
right: 75%;
}

.fil-lg-pull-8 {
right: 66.666667%;
}

.fil-lg-pull-7 {
right: 58.333333%;
}

.fil-lg-pull-6 {
right: 50%;
}

.fil-lg-pull-5 {
right: 41.666667%;
}

.fil-lg-pull-4 {
right: 33.333333%;
}

.fil-lg-pull-3 {
right: 25%;
}

.fil-lg-pull-2 {
right: 16.666667%;
}

.fil-lg-pull-1 {
right: 8.333333%;
}

.fil-lg-pull-0 {
right: auto;
}

.fil-lg-push-12 {
left: 100%;
}

.fil-lg-push-11 {
left: 91.666667%;
}

.fil-lg-push-10 {
left: 83.333333%;
}

.fil-lg-push-9 {
left: 75%;
}

.fil-lg-push-8 {
left: 66.666667%;
}

.fil-lg-push-7 {
left: 58.333333%;
}

.fil-lg-push-6 {
left: 50%;
}

.fil-lg-push-5 {
left: 41.666667%;
}

.fil-lg-push-4 {
left: 33.333333%;
}

.fil-lg-push-3 {
left: 25%;
}

.fil-lg-push-2 {
left: 16.666667%;
}

.fil-lg-push-1 {
left: 8.333333%;
}

.fil-lg-push-0 {
left: auto;
}

.fil-lg-offset-12 {
margin-left: 100%;
}

.fil-lg-offset-11 {
margin-left: 91.666667%;
}

.fil-lg-offset-10 {
margin-left: 83.333333%;
}

.fil-lg-offset-9 {
margin-left: 75%;
}

.fil-lg-offset-8 {
margin-left: 66.666667%;
}

.fil-lg-offset-7 {
margin-left: 58.333333%;
}

.fil-lg-offset-6 {
margin-left: 50%;
}

.fil-lg-offset-5 {
margin-left: 41.666667%;
}

.fil-lg-offset-4 {
margin-left: 33.333333%;
}

.fil-lg-offset-3 {
margin-left: 25%;
}

.fil-lg-offset-2 {
margin-left: 16.666667%;
}

.fil-lg-offset-1 {
margin-left: 8.333333%;
}

.fil-lg-offset-0 {
margin-left: 0%;
}
}

grid-css的更多相关文章

CSS Grid(CSS网格)
Grid被设计来做一些Flexbox不能做的事情,所以不是被设计来取代Flexbox的. flexbox 一维的 Grid 二维的总结: Grid Items作用在Grid Container的直 ...
CSS grid 模板
在gridCSS属性速记属性显式设置所有的网格性质(grid-template-rows,grid-template-columns,和grid-template-areas和所有的网格性质(隐式gr ...
dojo grid 编辑问题
今天dojo grid编辑小问题,找了半天才找到问题, 1.问题 2.原因数据单元没有索引列->id 3.修改前代码 <!DOCTYPE HTML> <html lang=& ...
Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
co css规范
CSS 编码规范 1. 文件组织 (建议试试LESS) 1.1 CSS 与 HTML CSS 一律写在 CSS 文件中,原则上不写内联样式. CSS 文件命名由小写字母.下划线(_)组成. CSS 文 ...
Google HTML/CSS/JS代码风格指南
JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...
compass安装使用960 Grid System
960 Grid System 是一个CSS的页面布局框架 demo: http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem ...
css的优化规则
1.避免过度约束: // 不推荐 ul.nav{..} // 推荐 .nav{..} 2.避免过长的后代选择符: // 不推荐 html div tr td {..} 3.避免链式(交集)选择符: ...
CSS框架960Grid从入门到精通一步登天
http://blog.chinaunix.net/uid-22414998-id-2878529.html 1.什么是CSS框架? CSS框架是一种你能够使用在你的web项目中概念上的结构, ...
CSS框架BluePrint
做惯了后台程序的我们,是否对前端编程有兴趣么,通过CSS框架,使我们很容易的开发出基于Div+CSS布局的页面来,今天让我们了解下大名鼎鼎的blueprint CSS框架吧! 它的官方网站:http: ...

随机推荐

动手学习TCP：客户端状态变迁
上一篇文章中介绍了TCP连接的建立和终止. 通过实际操作了解到,在TCP协议工作过程中,客户端和服务端都会接收或者发送特定标志的TCP数据包,然后进入不同的状态. 也就是说,TCP协议就是一个包含多种 ...
多次访问节点的DFS POJ 3411 Paid Roads
POJ 3411 Paid Roads Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6553 Accepted: 24 ...
HDU 1394 & ZOJ 1484 Minimum Inversion Number
(更新点查询区间) 这题重在想到,写代码很容易了..这题是利用线段树求逆序数,不按给定的顺序建树,而是有序地插入.比如每插入一个数,就统计之前插入的那些数里比他大的有多少个,这个数就是此时的逆序数,然 ...
Hanoi塔
2016-03-19 17:01:35 问题描述: 假设有三个命名为 A B C 的塔座 ,在塔座A上插有n个直径大小不相同,由小到大编号为1 ,2 ,3 ,··· ,n的圆盘,要求将A座上的圆盘移至 ...
Hibernate之Query接口的uniqueResult()方法
如果查询返回多个值用list()方法 public void testQuery(){ Configuration config = new Configuration().configure(); ...
C/C++学习----使用C语言代替cmd命令、cmd命令大全
[开发环境] 物理机版本:Win 7 旗舰版(64位) IDE版本:Visual Studio 2013简体中文旗舰版(cn_visual_studio_ultimate_2013_with_upda ...
Jsp页显示时间标签JSTL标签 <fmt:formatDate/> 实例大全
<fmt:formatDate value="${isoDate}" type="both"/>2004-5-31 23:59:59 <fmt ...
大话redis/memcache缓存
通常情况下,随着业务量增加,对后端数据库的访问压力也会随之加大.当数据库访问压力渐渐增大时,除了升级数据库配置提高数据库本身的抗压能力外,我们也可以采用在应用服务器与数据库服务器之间架设数据库缓存服务 ...
iOS单例模式(Singleton)写法简析
单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模式的要点有三个:一是某个类只能有一个实例: ...
FusionCharts参数的详细说明和功能特性（转）
功能特性animation 是否动画显示数据,默认为1(True)showNames 是否显示横向坐标轴(x轴)标签名称ro ...

grid-css

grid-css的更多相关文章

随机推荐

热门专题