利用Columnal网格系统快速搭建网站的基本布局结构
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 »</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 »</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网格系统快速搭建网站的基本布局结构的更多相关文章
- golang开源项目qor快速搭建网站qor-example运行实践
最近想找几个基于Go语言开发的简单的开源项目学习下,分享给大家,github上有心人的收集的awesome-go项目集锦:github地址 发现一个Qor项目: Qor 是基于 Golang 开发的的 ...
- 利用Docker Compose快速搭建本地测试环境
前言 Compose是一个定义和运行多个Docker应用的工具,用一个YAML(dockder-compose.yml)文件就能配置我们的应用.然后用一个简单命令就能启动所有的服务.Compose编排 ...
- express+handlebars 快速搭建网站前后台
最近在重构公司网站,原来网站使用PHP,前后端不分离,添加与更新网站内容仍使用原始方法,先出布局再把调好的布局给PHP后端开发,花时间长,维护不易.因此决定将网站前后端分离,核心功能含网站下单及CRM ...
- 前端框架Bootstrap - 快速搭建网站
Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和C ...
- 利用web.py快速搭建网页helloworld
访问web.py官网 http://webpy.org/ 根据网站步骤,利用 pip install web.py 若没有 PIP 则先安装pip 运行 sudo apt-get install py ...
- 利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务
作者:泽尘 简介 随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验.目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户 ...
- 快速搭建网站信息库（小型Zoomeye）
前言:本来是不想重复造车轮的,网上资料有开源的fofa,和一些设计.有的架设太复杂了,好用东西不会用,整个毛线.还有的没有完整代码. 设计方案: 测试平台:windows 测试环境:php ...
- 利用GitHub Pages + jekyll快速搭建个人博客
前言 想搭建自己博客很久了(虽然搭了也不见得能产出多频繁). 最初萌生想写自己博客的想法,想象中,是自己一行一行码出来的成品,对众多快速构建+模板式搭建不屑一顾,也是那段时间给闲的,从前后端选型.数据 ...
- 利用 TFLearn 快速搭建经典深度学习模型
利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<Tenso ...
随机推荐
- favicon的制作
在head中插入如下标签: <link rel="shortcut icon" href="favicon.ico" />.然后把图标命名为favi ...
- Python与Hack之Unix口令
1.在实验时候,先导入crypt库:必须在Unix环境下才能实现这个模块 2.代码贴一下,以后有了Unix环境试试吧: import cryptimport syssys.modules['Crypt ...
- Android手机自动化测试真机运行
一, 打开手机的USB调试模式 不同的手机有不同的方法打开usb调试模式,可是去网上查一下你手机的调试模式打开办法(http://wenku.baidu.com/view/3077f06c25c ...
- [bzoj1068]压缩[区间动规]
看了lujiaxin的blog,感觉自己好浪啊....好难过 刷题的时候不够投入,每种算法都是只写一两道就过去了,这样怎么可能进步嘛 不要总是抱怨时间太少了 都是自己不努力>_< 好啦 看 ...
- Eclipse快捷键/快捷操作汇总
1.建立.切换不同的工作空间: 工作空间是放置项目的,它是项目的集合,多个工程放在一个工作空间上容易出问题,建议把不同项目存放在单独的工作 空间内,让项目代码更加有序 file → switch w ...
- SQL SERVER 和ACCESS的数据导入导出
//批量导入Access string filepath = Server.MapPath("student.mdb"); stri ...
- Linux下使用vim的tips
1.如果用户不能确定vi所处的状态,可以按Esc键两次返回初始状态. 2.Fedora 17下安装与配置ssh:http://blog.csdn.net/ashuai81/article/detail ...
- ssh myeclipse的bug
1 有时候复制完一个类的时候,myeclispe会少复制一些方法.很坑爹.复制的时候最好从新创建让后粘贴 2 有时候jsp页面经过修改该以后,在网页上显示的还是原来的页面,很坑爹.删掉tomcat然后 ...
- BZOJ3424 : Poi2013 Multidrink
详细做法以及证明请看论文<Hamiltonian paths in the square of a tree>. 首先将1到n的路径提取出来,作为主干. 定义毛毛虫为去掉叶子之后只有一条单 ...
- ACM: Just a Hook 解题报告 -线段树
E - Just a Hook Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u D ...