利用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 &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类表明该元素横跨多少列。

时间: 2024-10-11 22:03:44

利用Columnal网格系统快速搭建网站的基本布局结构的相关文章

网鱼网咖-利用数加快速搭建大数据平台,极致洞察,为客户带来从所未有的体验。

免费开通大数据服务:https://www.aliyun.com/product/odps "令人惊喜的是,利用阿里云的数加平台,我们差不多一个多月就搭建好了大数据平台,并且可以通过图形化的界面快速的开发,几个开发人员很快的掌握,甚至我们把阿里云的开发端给了业务部门,他们一些稍微资深一点的业务人员也可以使用,所以我们初步估计了一下,给我们节省的价值至少是千万级的."--网鱼网咖CTO楚发 关于网鱼网咖 网鱼网咖成立于1998年,致力于打造多人游戏空间,为顾客提供极致的游戏上网体验.网鱼

前端框架Bootstrap - 快速搭建网站

Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件:下拉菜单.按钮组.导航.导航条等等.可以说Bootstrap是一个简洁简单的前端开发框架,可以让Web开发更迅速更简单. 学习和下载资料主要可以通过官方中文网 www.bootcss.com . Bootstrap优

云服务器如何快速搭建网站环境?

以前买了服务器要想搭建好网站运行环境那是有一定难度的,要装iis.php.数据库.各种组件.没点专业技术还真没辙. 不过时代在进步,现在可好了.购买服务器后只需要装一个纯净版的服务器系统,安装安装一个宝塔.几分钟就能配置好专业的网站环境.各种网站所需的套件都可以轻松的一件安装.比如:Linux系统用宝塔面板,win系统用 云帮手.接下来宵云小编以下linux宝塔面板安装教程 如何远程连接Linux服务器 远程登陆linux,使用的是ssh协议. windows平台下有putty,Xshell,S

使用JavaTodo框架快速搭建网站

最近一段时间一直忙着做一个网站,这是我们导师接的一个私活,现在基本功能算是完成了.比较有收获的是了解了JavaTodo框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助. 以前用servlet做过一个很蹩脚的网站,为什么这么说呢,因为写的全是死代码.做完以后觉得实在是累,前端要div+css,js 后端要java,MySQL,这么多东西要弄,十分头疼.所以,在接到做网站的任务后,我第一时间想到一定要使用开发框架去做,绝不能跟以前一样那么累了. 我选择的是java的JavaT

vue脚手架的快速搭建方式以及内部目录结构

a    ,搭建Vue脚手架的方式   首先 检查电脑是否已经安装好了node   且node版本不能低于6.0.0 查询node  使用命令行   node -v    (如果版本过底 可去官网下载安装即可) b ,   检查完了node后就可以开始着手安装了 1 , 首先   先要安装好webpack  命令行 npm install webpack -g 2 , 在webpack安装好的基础上   我们开始安装vue-cli脚手架 命令行        npm install vue-cl

利用 TFLearn 快速搭建经典深度学习模型

利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<TensorFlow 增加自定义运算符>).由于运算符的粒度较小,在构建深度学习模型时,代码写出来比较冗长,比如实现卷积层:5, 9 这种方式在设计较大模型时会比较麻烦,需要程序员徒手完成各个运算符之间的连接,像一些中间变量的维度变换.运算符参数选项.多个子网络连接处极易发生问题,肉眼检查也很难发现代码中潜伏的 bu

选择合适的CMS搭建网站

cms内容管理系统是一种网络应用程序,它利用数据库(通常为MySQL)或其它方式并以可控制的方式来创建,编辑和存储HTML内容.网络应用程序的管理区域会首先创建和编辑内容(即通常所说的Web后端),然后内容结果就会显示在常规网站上供访客浏览(即通常所说的Web前端). 如何选择cms快速搭建网站,其出发点是网站的需求.现在cms功能都很强大,只需要从三个方面进行选择就可以了,第一是用途,如果是搭建企业站,建议选择织梦cms,如果是网上商城可以选择ecshop,论坛可以选择dz或者动易,博客可以用

Spring-Boot快速搭建web项目详细总结

最近在学习Spring Boot 相关的技术,刚接触就有种相见恨晚的感觉,因为用spring boot进行项目的搭建是在太方便了,我们往往只需要很简单的几步,便可完成一个spring MVC项目的搭建,感觉就是下图: 好,下面就本人搭建项目的过程简单说说如何快速搭建一个spring MVC项目,相信我,spring-boot这趟车,你上了根本就停不下来了! 下面是这篇博客的主要内容: 1.spring boot 介绍 2.spring boot 项目快速搭建 3.spring-boot中单元测试

ThinkPHP框架快速开发网站

使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助,那就更好了挖. 以前用PHP做过一个很蹩脚的网站,为什么这么说呢,因为写的全是死代码.做完以后觉得实在是累,前端要div+css,js 后端要php,mysql,这么多东西要弄,十分头疼.所以,在接到做网站的任务后,我第一时间想到一定要使用开发框架去做,绝不能跟以前一样那么累了. 我选择的是PHP