网页尺寸的黄金比例:960 Grid System

日期:2013-12-02 09:00:00

    960 Grid System(网格设计系统)是一种平面设计的方法与风格,运用固定的格子设计版面布局,建立工整简洁的设计风格。相较於早期网页Free Style的自由设计风格,Grid System更能清楚呈现复杂的网页资讯。

    960 Grid System是使用固定宽度960pixel(像素)置中对齐画面的方式呈现在网页上,去除左右两边各10pixel的空间,留下中间940pixel的区块以20pixel作為间隔分栏。在空间设计上,可随意合併多栏作為版面配置及网页尺寸的设定,合併出来的栏宽也不会有畸零数,有利於CSS中DIV宽度的设定。


960grid分為12栏与16栏两种,其中因12能被3、4、6整除,能建立3栏、4栏、6栏的版面配置,在使用上较為灵活,以下以12栏的样式做為示范。


    只有左栏的尺寸设定

    通常使用於内页设计:左方边栏+主要内容。

    同时有左右栏的尺寸设定

    常见於部落格的版面设计,使用於同时有左右两个选单的时候。

    三栏的尺寸设定

    通常用在首页或网站下方的自订区块(user-custom),可放置快速连结、***消息、广告讯息…。

    四栏的尺寸设定

    通常用在首页或网站下方的自订区块(user-custom),可放置快速连结、***消息、广告讯息…。


上一篇文章:
下一篇文章: