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. HTML5 重要标签以及属性学习

    1.一个标签可以有多个,class=“A B C ” 效果: 2.padding的扩展:当padding的值是正的时候,元素显示的大小会变大:当padding的值是负的时候,元素显示的大小会变小 pa ...

  2. sql in(1,2,3)参数化查询，错误在将 varchar 值 '1,2,3,4' 转换成数据类型 int 时失败

    解决办法 string userIds = "1,2,3,4";using (SqlConnection conn = new SqlConnection(connectionSt ...

  3. Python学习笔记09

        异常处理   参考文章:http://blog.csdn.net/sinchb/article/details/8392827 有异常则执行except子句--类似C#的catch 就是当没有 ...

  4. C#生成PDF总结

    (一)C#生成PDF总结 (1)iTextSharp控件对iTextSharp研究还可以表格.文字.各种GDI对象,图片,水印,文字旋转(2)aspose的控件(3)PDF Library这个类库(只 ...

  5. CodeForces#275--DIV 2--A

    A. Counterexample time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. ural 1250. Sea Burial

    1250. Sea Burial Time limit: 1.0 secondMemory limit: 64 MB There is Archipelago in the middle of a s ...

  7. 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法

    众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...

  8. ccc animation

    cc.Class({ extends: cc.Component, properties: { sheepAnim: { default: null, type: cc.Animation } }, ...

  9. 2016年AR行业十大热点事件汇总

    2016年即将接近尾声,增强现实在今年完成了里程碑式的跃进.无论是从新玩法的开发还是从大众接受度,以及行业巨头的青睐,无不证明这AR的无线潜力,故而,2016年算是AR的崛起之年. 纵观全年AR新闻事 ...

  10. 解决HttpServletResponse输出的中文乱码问题

    http://blog.csdn.net/simon_1/article/details/9092747 首先,response返回有两种,一种是字节流outputstream,一种是字符流print ...