`

一个简单的响应式横向网格布局框架Responsive Grid System

阅读更多

网页设计中有一个怎么也绕不开的问题,那就是布局问题。一般来说,一个div可能会分割成很多部分,同样是横向分割成两部分,但是在不同的项目中,我们可能会用不同的css代码,网格系统其实就是为这一类似的问题提供一个统一的解决办法。

网格布局有很多,但是有很多非常复杂,往往无法二次开发。Responsive Grid System是国外的一个网站,他们提供了一种非常简单的实现。其实每一个前端开发人员都可以写出这样的框架,但是,从头开始也许会让很多人动力不足。这个框架代码很简单,对我而言,采用它的原因仅仅是我能修改它,沿用它的结构和命名规则,很多时候,让我们无从开头一个系统的css代码的原因恰恰是因为不知道如何命名。

可以500%提高开发效率的前端UI框架!

我对这个框架的态度是:它给我们开了个好头,我可以按照我的想法继续下去。还有就是兼容性,国外那些特立独行的设计师们很少会考虑不支持html5的浏览器,他们或许做出来很多酷的效果,但别高兴早了,都是些在ie上没法用的。这个css框架可以兼容ie6.

 

来看看这个框架的例子程序,以3列和4列为例:

html代码:

<div class="section group">
    <div class="col span_1_of_3">
    This is column 1
    </div>
    <div class="col span_1_of_3">
    This is column 2
    </div>
    <div class="col span_1_of_3">
    This is column 3
    </div>
</div>
<div class="section group">
    <div class="col span_1_of_4">
    This is column 1
    </div>
    <div class="col span_1_of_4">
    This is column 2
    </div>
    <div class="col span_1_of_4">
    This is column 3
    </div>
    <div class="col span_1_of_4">
    This is column 4
    </div>
</div>

 

 

 

css代码: 可以500%提高开发效率的前端UI框架!

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
         
/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
         
/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
         
/*  GRID OF FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
}
.span_2_of_4 {
    width: 49.2%;
}
.span_1_of_4 {
    width: 23.8%;
}
         
/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}

 

 

虽然代码谁都能看懂,但是对于善于学习的人来说,关注的往往不是实现本身,而是为什么这样实现,如果是我,会怎么实现。所以我还是简单的讲讲这个网格系统的“原理”:

How It Works

 

.section

section元素将页面横向分割成几部分。可以500%提高开发效率的前端UI框架!

.group

group元素解决浮动的问题,这类似于网上的clearfix。兼容ie6以上。

.col

col将section分割成小栏目。每一栏都有一定的margin值。每一栏的宽度是用的百分比。百分比值应该是作者根据经验得出来的。

0
0
分享到:
评论
1 楼 yizhyi 2014-10-14  
为什么没有效果图?

相关推荐

Global site tag (gtag.js) - Google Analytics