标签：
1.下面是一些对响应式设计提供了不同程度支持的CSS框架：
（1）Semantic(http://semantic.gs);
（2）Skeleton(http://getskeleton.com);
（3）Less Framework(http://lessframework.com);
（4）1140 CSS Grid(http://cssgrid.net);
（5）Columnal(http://www.columnal.com)
2.本节主要讲Columnal网格系统并介绍如何利用它快速搭建网站的基本布局结构。
Columnal有一套内置的集成了媒体查询的流动网格布局，而且它使用了与960.gs框架类似的CSS命名，960.gs框架是一套广为开发者和设计师所熟知的非常流行的固定宽度网格系统。
假设我们手里现在只有一个网站首页的PSD分层图，且被要求使用HTML和CSS尽可能快地搭建起网站的基本布局结构。
Columnal网格系统最大只支持12列布局，以下结合具体例子介绍如何使用Columnal来帮助我们快速搭建网站。
3.使用步骤
（1）去Columnal官网下载Columnal的压缩包到本地，然后解压。
（2）将我们已写好的页面复制一份，然后将columnal.css引入到该页面并给正确的div添加正确的class。
4.网站首页源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=divice-width,initial-scale=1.0" />
<title>And the winner isn‘t...</title>
</head>
<body>
<div id="wrapper">
<!-- the header and the navigation -->
<div id="header">
<div id="logo">And the winner is<span>n‘t...</span></div>
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
</div>
<!-- the content -->
<div id="content">
<img class="oacarMain" src="./Images/oscar.jpg" alt="atwi_oscar" />
<h1>Every year<span>when i watch the oscars I‘m annoyed...</span></h1>
<p>that films like King Kong,Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out.Not very Hollywood is it?</p>
<p>We‘re here to put things right.</p>
<a href="#">these should have won »</a>
</div>
<!-- the sidebar -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="./Images/one.jpg" alt="Midnight Run"></a>
<a href="#"><img src="./Images/two.jpg" alt="Wyatt Earp"></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="./Images/three.jpg" alt="Moulin Rouge"></a>
<a href="#"><img src="./Images/four.jpg" alt="King Kong"></a>
</div>
</div>
<!-- the footer-->
<div id="footer">
<p>Note:our opinion is absolutely correct.You are wrong,even if you thinkyou are right.That‘s a fact.Deal with ti.</p>
</div>
</div>
</body>
</html>
首先，要将#wrapper div设置为其他所有元素的容器，所以为其追加.container类：
5.引入columnal.css到该页面并给正确的div添加正确的class之后的代码（黑体为添加上的）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=divice-width,initial-scale=1.0" />
<title>And the winner isn‘t...</title>
<link rel="stylesheet" type="text/css" href="./Columnal/code/css/columnal.css" />
</head>
<body>
<div id="wrapper" class="container">
<!-- the header and the navigation -->
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n‘t...</span></div>
<div id="navigation" class="row">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
</div>
<div class="row">
<!-- the content -->
<div id="content" class="col_9 alpha omega">
<img class="oacarMain col_3" src="./Images/oscar.jpg" alt="atwi_oscar" />
<div class="col_6 omega">
<h1>Every year<span>when i watch the oscars I‘m annoyed...</span></h1>
<p>that films like King Kong,Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out.Not very Hollywood is it?</p>
<p>We‘re here to put things right.</p>
<a href="#">these should have won »</a>
</div>
</div>
<!-- the sidebar -->
<div id="sidebar" class="col_3">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="./Images/one.jpg" alt="Midnight Run"></a>
<a href="#"><img src="./Images/two.jpg" alt="Wyatt Earp"></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="./Images/three.jpg" alt="Moulin Rouge"></a>
<a href="#"><img src="./Images/four.jpg" alt="King Kong"></a>
</div>
</div>
</div>
<!-- the footer-->
<div id="footer" class="row">
<p>Note:our opinion is absolutely correct.You are wrong,even if you thinkyou are right.That‘s a fact.Deal with ti.</p>
</div>
</div>
</body>
</html>
整体框架搭建好，具体细节可以通过添加额外的css代码进行优化页面。
其中：.col_x类表明该元素横跨多少列。
标签：
原文地址：http://www.cnblogs.com/xuying/p/4653641.html
