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 &raquo;</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 &raquo;</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类表明该元素横跨多少列。

利用Columnal网格系统快速搭建网站的基本布局结构的更多相关文章

  1. golang开源项目qor快速搭建网站qor-example运行实践

    最近想找几个基于Go语言开发的简单的开源项目学习下,分享给大家,github上有心人的收集的awesome-go项目集锦:github地址 发现一个Qor项目: Qor 是基于 Golang 开发的的 ...

  2. 利用Docker Compose快速搭建本地测试环境

    前言 Compose是一个定义和运行多个Docker应用的工具,用一个YAML(dockder-compose.yml)文件就能配置我们的应用.然后用一个简单命令就能启动所有的服务.Compose编排 ...

  3. express+handlebars 快速搭建网站前后台

    最近在重构公司网站,原来网站使用PHP,前后端不分离,添加与更新网站内容仍使用原始方法,先出布局再把调好的布局给PHP后端开发,花时间长,维护不易.因此决定将网站前后端分离,核心功能含网站下单及CRM ...

  4. 前端框架Bootstrap - 快速搭建网站

    Bootstrap简介         Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和C ...

  5. 利用web.py快速搭建网页helloworld

    访问web.py官网 http://webpy.org/ 根据网站步骤,利用 pip install web.py 若没有 PIP 则先安装pip 运行 sudo apt-get install py ...

  6. 利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务

    作者:泽尘 简介 随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验.目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户 ...

  7. 快速搭建网站信息库（小型Zoomeye）

    前言:本来是不想重复造车轮的,网上资料有开源的fofa,和一些设计.有的架设太复杂了,好用东西不会用,整个毛线.还有的没有完整代码. 设计方案:    测试平台:windows    测试环境:php ...

  8. 利用GitHub Pages + jekyll快速搭建个人博客

    前言 想搭建自己博客很久了(虽然搭了也不见得能产出多频繁). 最初萌生想写自己博客的想法,想象中,是自己一行一行码出来的成品,对众多快速构建+模板式搭建不屑一顾,也是那段时间给闲的,从前后端选型.数据 ...

  9. 利用 TFLearn 快速搭建经典深度学习模型

      利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<Tenso ...

随机推荐

  1. poj3616 LIS变形

    题目链接:http://poj.org/problem?id=3616 题意:给出m组数据a,b,c代表在第a分钟到第b分钟产生c个效益,问最大产生多少效益(区间不能重叠,每次工作完必须歇息R分钟) ...

  2. js正则表达式练习

    匹配完整的名字 function process_name() { var field = document.getElementById("name_field"); var n ...

  3. js 的一点用法

     js 中的json对象,ajax返回数据dataType为json否则无法将数据转换成json对象 也就无法通过json字符串转换成对象object,那么他将始终是个字符串,也就无法进行 对象操作. ...

  4. css -- 高度相等的列 -- 3列高度相等

    <div class="wrapper"> <div class="box"> <h1>wo shi hao ren< ...

  5. 线段树(区间合并) LA 3989 "Ray, Pass me the dishes!"

    题目传送门 题意:动态最大连续子序列和,静态的题目 分析:nlogn的归并思想.线段树维护结点的三个信息,最大前缀和,最大后缀和,该区间的最大和的两个端点,然后答案是三个的better.书上用pair ...

  6. HDU5739 Fantasia（点双连通分量 + Block Forest Data Structure）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5739 Description Professor Zhang has an undirect ...

  7. HDU3395 Special Fish（最大费用任意流）

    题目要的并不是最大匹配下得到的最大的结果. 网上流行的做法是加边.其实,在连续增广的时候求得一个可行流的总费用为负就停止这样就行了. #include<cstdio> #include&l ...

  8. CodeForceS#276-A

    A. Factory   One industrial factory is reforming working plan. The director suggested to set a mythi ...

  9. CentOS6.4 安装Sphinx 配置MySQL数据源

    前提安装完mysql,并创建测试表和数据 DROP TABLE IF EXISTS `documents`; CREATE TABLE IF NOT EXISTS `documents` ( `id` ...

  10. Android -- shape 定义控件的属性

    <shape> <!-- 实心 --> <solid android:color="#ff9d77"/> <!-- 渐变 --> & ...