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. 关于最近Google无法正常访问的变通之法(已经被墙)

    对于习惯使用谷歌搜素的骚年最近可能比较蛋疼,没这方面需求的就另当别论.可能是政府限制加强的原因,有时访问谷歌在香港服务器也不大好使,不过最近发现,不通过谷歌域名而直接使用谷歌的ip来访问谷歌响应速度可 ...

  2. sql中保留到小数点后两位以及非空判断赋值为零

    SELECT a.dzzmc, a.dzzdm, a.px, CONVERT(decimal(18, 2), ISNULL(b.sjpfzdf, 0) * 0.6 + (ISNULL(a.zddfzd ...

  3. three.js阴影

    <!DOCTYPE html> <html> <head> <title>Example 01.03 - Materials and light< ...

  4. ACM ICPC 2015 Moscow Subregional Russia, Moscow, Dolgoprudny, October, 18, 2015 K. King’s Rout

    K. King's Rout time limit per test 4 seconds memory limit per test 512 megabytes input standard inpu ...

  5. Visual Studio: Show Solution Platform in Toolbar

    link: http://stackoverflow.com/questions/7516755/solution-configuration-but-not-platform-in-vs2010-t ...

  6. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  7. svn服务器端的客户端自动更新

    先说这个方式的一个弊端,那就是服务器端这边代码不能与svn服务器出现冲突,一旦冲突就失效. 实现原理是,利用svn版本库,hooks目录的bat钩子开展工作. 共在hooks目录下建立3个文件如下:p ...

  8. Codeforces Round #243 (Div. 2) A. Sereja and Mugs

    #include <iostream> #include <vector> #include <algorithm> #include <numeric> ...

  9. Leetcode Median of Two Sorted Arrays

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  10. 【JAVA】 @override报错的解决方法

    有时候Java的Eclipse工程换一台电脑后编译总是@override报错,把@override去掉就好了,但不能从根本上解决问题,因为有时候有@override的地方超级多. 原因:这是jdk的问 ...