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. 用js刷题的一些坑

    leecode可以用js刷题了,我大js越来越被认可了是吧.但是刷题中会因为忽略js的一些特性掉入坑里.我这里总结一下我掉过的坑. 坑1:js中数组对象是引用对象 js中除了object还有数组对象也 ...

  2. Java与.NET随笔

    .NET与Java,因这两种技术的相似性,总是会让人拿来做比较,并且总有人想让二者一分高下,最后得出孰优孰劣的结论.由于本人先用.NET,后转Java,现在.NET与Java二者并用,所以对二者间的差 ...

  3. iOS App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.

    You can easily add it to the plist using the GUI: On the last line add the + Enter the name of the g ...

  4. 疯狂java学习笔记之面向对象(三) - 方法所属性和值传递

    方法的所属性: 从语法的角度来看:方法必须定义在类中 方法要么属于类本身(static修饰),要么属于实例 -- 到底是属于类还是属于对象? 有无static修饰 调用方法时:必须有主调对象(主语,调 ...

  5. Codeforces 611C New Year and Domino（二维前缀和）

    题目大概说给一个n*m个格子,格子'.'表示可以放东西,多次询问矩形区域(x1,y1)-(x2,y2)有几种放一张1*2的骨牌的方案数. 分别考虑横着竖着放,预处理出二维的前缀和,即sum[x][y] ...

  6. Codeforces 682C Alyona and the Tree（树形DP）

    题目大概说给一棵点有权.边也有权的树.一个结点v不高兴当且仅当存在一个其子树上的结点u,使得v到u路径上的边权和大于u的权值.现在要不断地删除叶子结点使得所有结点都高兴,问最少删几个叶子结点. 一开始 ...

  7. ACM 图像有用区域

    图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 “ACKing”同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑色线圏成的区域以 ...

  8. ACM: Just a Hook 解题报告 -线段树

    E - Just a Hook Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   D ...

  9. NOIp 2014 #1 生活大爆炸版石头剪刀布 Label：模拟

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...

  10. 【BZOJ1001】【BeiJing2006】狼抓兔子 最大流

    Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...