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. Codeforces Round #375 (Div. 2) - D

    题目链接:http://codeforces.com/contest/723/problem/D 题意:给定n*m小大的字符矩阵.'*'表示陆地,'.'表示水域.然后湖的定义是:如果水域完全被陆地包围 ...

  2. js整理3

    函数 call: fun.call(a), a会转化成相应的对象,函数内的this即指向它; function foo() { console.log(this); } foo.call(null); ...

  3. 得到UIView中某个非子视图在UIView中的位置

    使用 convertRect: fromView: 或者 convertRect: toView:例如一个视图控制器的view中有一个UITableView,UITableView的某个cell中有个 ...

  4. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  5. 找规律 Codeforces Round #290 (Div. 2) A. Fox And Snake

    题目传送门 /* 水题 找规律输出 */ #include <cstdio> #include <iostream> #include <cstring> #inc ...

  6. WPF DataGrid – Dynamically updating DataGridComboBoxColumn

    The Scenario I want to do a master detail like scenario where the selection in one ComboBox cell wil ...

  7. ural 1075. Thread in a Space

    1075. Thread in a Space Time limit: 1.0 secondMemory limit: 64 MB There are three points in a 3-dime ...

  8. Unity 状态转化机器

    using System; using System.Collections; using System.Collections.Generic; using UnityEngine; /** 有限状 ...

  9. Node.js学习

    1. 下载 网址:https://nodejs.org/download/ 2. 添加express框架 如下图,运行Node.js command prompt 在命令行中输入:npm instal ...

  10. 【转】crontab定时任务中文乱码问题

    转载:http://blog.163.com/rettar@126/blog/static/1216503422012135511740/ 手动执行都很正常的的脚步,添加到定时任务中一直执行失败,日志 ...