使用网格系统快速搭建网站

发布日期:2015-08-03 15:19:49

假设我们还没有构建流动布局,也还没有编写任何媒体查询代码。我们手里只有 北京网站设计...网站首页的 PSD分层图,且被要求使用 HTML和 CSS尽可能快地搭建起网站的基本布局结构。我们来看看 Columnal网格系统如何帮助我们快速实现这个目标。

在 PSD 原始设计图中,很容易看出网站是 16 列布局。但 Columnal 网格系统最大只支持12列,所以我们将 PSD中的 16列改为 12列。下载 Columnal网格系统的压缩包然后解压,将我们已有的页面复制一份,然后将页面头部的 CSS文件链接从 main.css 改为 columnal.css 。 使用 Columnal系统创建页面结构的关键是给 div添加正确的 class

首先,要将 #wrapper div设置为其他所有元素的容器,所以为其追加 .container 类:

<div id="wrapper" class="container">

接着往下看,AND THE WINNER ISN'T是页面的第一行文字,所以为头部追加 .row 类:

<div id="header" class="row">

网页 logo虽然只是文字,嵌在一行里,但横跨 12列。因此为其追加 .col_12 类:

<div id="logo" class="col_12"><span>北京网站建设...</span></div>

紧接着一行是导航,所以为其追加一个 .row 类:

<div id="navigation" class="row">

然后继续根据需要给元素追加 .row 和 .col_x 类。此处我将跳过后续的修改,因为我觉得重复这个过程可能会让你打盹。下面展示的代码就是修改后的完整页面标签。注意,修改中需要将奥斯卡图片挪到单独的一列中。 另外还需要给 #content 和 #sidebar 外面

包裹一层类名为 .row 的 div

在这些基本修改完成之后,在浏览器窗口中就能看到页面的基本结构已经搭好,且页面

能随着浏览器视口的改变而缩放。很明显还有很多细节工作要做(我知道,这样说太轻描淡写了) ,但如果你需要一种快速搭建响应式网站结构的方法,那么 Columnal这样的 CSS网格系统值得考虑。

 

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计