CSS框架 ：960 Grid System ?官網(wǎng)：http://960.gs/

?什么是框架？框架是一種你能夠使用在你的web項(xiàng)目中概念上的結(jié)構(gòu)。CSS框架一般是CSS文件的集合，包括基本風(fēng)格的字體排版，表單樣式，表格布局等等，比如：

??? * typography.css 字體排版規(guī)則
??? * grid.css 表格布局
??? * layout.css 布局
??? * form.css 表單
??? * general.css CSS常規(guī)設(shè)置

下面是一些不錯(cuò)的CSS框架，推薦。

Blueprint CSS

Blueprint是一個(gè)CSS框架，它的目標(biāo)是減少你的CSS開發(fā)時(shí)間。它提供給你強(qiáng)大的CSS基礎(chǔ)來創(chuàng)建你的項(xiàng)目，包括易于使用的grid，有效的字體排版，以及可打印的stylesheet .

960 Grid System

?一、960的奧妙

????? 從數(shù)學(xué)著手： 960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標(biāo)記為：

N(960) = N(2^6 * 3 * 5) = 26

根據(jù)上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30

從上述算法我們可以得出以下結(jié)論：

要使得N(width)最大，width的取值有兩個(gè)系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可組合的寬度值就越多。

????? 目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率，而960恰好是1024 x 768 分辨率下最靈活也是最合適的尺寸，這些條件決定了960成了目前設(shè)計(jì)中最完美的尺寸。（PS：此部分內(nèi)容大多摘自：960 Grid System 研究）

二、960網(wǎng)格系統(tǒng)簡介

本質(zhì)：

960 Grid System?是一套基于寬度為 960px CSS 框架，它為網(wǎng)頁布局提供了通用的尺寸設(shè)置，它提供了兩種不同的尺寸布局：12列和16列，它們可以獨(dú)立使用，也可以一起使用。

尺寸：

12列的布局，將總寬分成12份，每份的寬度是60px，而16列的布局分成16份，每份的寬度是40px，每部分左右邊距都是10px，從而每列產(chǎn)生20px的空隙。

目的：

該系統(tǒng)以快速原型開發(fā)為出發(fā)點(diǎn)，但同時(shí)也能很好地集成到生產(chǎn)環(huán)境中去。它同時(shí)提供了打印布局、設(shè)計(jì)布局和一個(gè)能提供一致尺寸的 CSS 文件。

?960 Grid System是一個(gè)非常棒的布局輔助設(shè)計(jì)系統(tǒng)，以960PX為基準(zhǔn)寬度提供了12列和16列兩種布局模式（PS：目前官方已經(jīng)提供了24列的布局模式，相信作者以后還會提供更多的布局模式）。

??????1：alpha與omega

????? 960 Grid System的布局寬度為960PX，但由于每列左右均由10PX的margin（外補(bǔ)丁），因此內(nèi)容寬度實(shí)際為940px。

/*alpha：用于清除左邊10px的marginomega：用于清除右邊10px的margin*/

????? PS：從作者取alpha與omega這兩個(gè)名字可以想象一下或許作者很熱愛希臘文化。alpha（α）在希臘字母表里，它是第一個(gè)字母，讀作“阿爾法”（阿拉法），代表開始；omega（γ）在希臘字母表里，它是最后一個(gè)字母，讀作“歐美噶”（俄梅嘎），代表終了。

?????2：prefix_XX與suffix_xx

/*用于在每個(gè)單元網(wǎng)格的前面或后面添加空白的列（欄）*//*用法：<div class="prefix_15 grid_1">IT北瓜</div>*/

??????3：clear與hr

/*用于清除層的浮動*//*用法：<div class="clear"></div>*//*但假如你查看過官網(wǎng)主頁的源代碼你會發(fā)現(xiàn)，作者用的是<hr />*//*用法：可參考官網(wǎng)主頁的源代碼<hr />*/

?????4：push_xx與pull_xx

/*這是2009-06-29更新新增的類，用于重新定制布局順序*//*用法：引用官網(wǎng)主頁源代碼*/<h1 class="grid_4 push_4"> 960 Grid System</h1><!-- end .grid_4.push_4 --><p id="description" class="grid_4 pull_4"> <a href="files/960_download.zip">Download</a> &larr; Templates for <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>, <a href="http://www.adobe.com/products/indesign/">InDesign</a>, <a href="http://www.inkscape.org/">Inkscape</a>, <a href="http://www.adobe.com/products/illustrator/">Illustrator</a>, <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a>, <a href="http://www.adobe.com/products/photoshop/">Photoshop</a>, <a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>, <a href="http://www.microsoft.com/expression/products/Design_Overview.aspx">Expression Design</a>. Sketch PDF. CSS code. The 960.css file is 5.4 KB. View <a href="http://bitbucket.org/nathansmith/960-grid-system/">repository</a>.</p><!-- end #description.grid_4.pull_4 --><hr /><div class="grid_6"> <p> <a href="http://www.spry-soft.com/grids/"><img src="img/tool_css.gif" alt="Custom CSS generator" width="460" height="60" /></a> </p></div><!-- end .grid_6 --><div class="grid_6"> <p> <a href="http://gridder.andreehansson.se/"><img src="img/tool_bookmark.gif" alt="Grid overlay bookmark" width="460" height="60" /></a> </p></div><!-- end .grid_6 -->

??????5：container_xx與grid_xx

/*這是該系統(tǒng)最基本最重要的用法，其中xx代表列數(shù)*//*用法：*/<div class="container_12"> <div id="sidebar" class="grid_2">sidebar</div> <div id="content" class="grid_10"> <div id="main_content" class="grid_6 alpha">main content</div> <div id="photos" class="grid_2">photo’s</div> <div id="advertisements" class="grid_2 omega">advertisement</div> <div class="clear"></div> </div> <div class="clear"></div></div>

以上轉(zhuǎn)載自IT北瓜

鏈接地址:?http://imleeo.com/special-series/960-grid-system-introduction.html

首先，你需要學(xué)習(xí)關(guān)于”如何讓框架工作”。你可以通過自己的嘗試來學(xué)習(xí)，不過我仍然會在這里為大家進(jìn)行講解，那就開始吧。

不要編輯960.css

先說一點(diǎn)需要注意的:不要編輯960.css文件，如果你修改了它，那么你今后將無法更新這個(gè)框架。

讀取網(wǎng)格

在我們使用外部文件中的CSS代碼之前，首先要在我們的HTML文件中調(diào)用它們。像這樣調(diào)用:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />

當(dāng)我們調(diào)用好它們以后，我們要調(diào)用自己的CSS文件了。例如，你也許會將你的CSS文件命名為style.css或site.css或者其它什么的。這樣調(diào)用它:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

Containers(容器)

在960框架中，你可以選擇兩種類名為.container_12 和 .container_16的容器。這兩種容器都是960px的寬度(這就是為什么叫做960 grid),但他們的不同之處是它們包含不同數(shù)量的列。顧名思義，.container_12的容器被分為12列，而 .container_16被分為16列。這兩種960px寬的容器都是水平居中的。

Grids (網(wǎng)格)/ Columns(列)

你可以選擇很多種不同的列寬組合，不過在這兩種容器中是有所不同的。你可以通過打開960.css來了解這些寬度，但這對于設(shè)計(jì)一個(gè)網(wǎng)站并沒有什么必要。在這里暴風(fēng)彬彬?qū)⒁粋€(gè)很有用的技巧讓你使用框架更加容易。

例如:如果你想在你的容器中僅使用兩列(分別是主內(nèi)容區(qū)/側(cè)邊欄)，你可以這樣做:

<div class=”container_12″>
<div class=”grid_4″>sidebar</div>
<div class=”grid_8″>main content</div>
</div>

看到上面的代碼你也許已經(jīng)明白，不過我還是要講一下。也就是說你在container_12這個(gè)容器中使用了grid_4和grid_8兩列，4+8恰好等于12！明白了嗎？使用網(wǎng)格系統(tǒng)的好處之一就是你不用去計(jì)算沒列的寬度到底是多少，省去了很多運(yùn)算。

下面讓我們看看如何編寫四列布局:

<div class=”container_12″>
<div class=”grid_2″>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2″>advertisement</div>
</div>

正如你看到的，這個(gè)系統(tǒng)工作得很好。如果你嘗試使用你的瀏覽器讀取他的話，你會發(fā)現(xiàn)有一些不對勁的地方。不過不要緊，那正是我們下一個(gè)話題要討論的。

Margins

默認(rèn)情況下，每列之間都會存在一些margin。每個(gè)grid_(這里插入數(shù)值)類都有10px的左margin和右margin。也就是說兩列之間的margin值是20px。

20px的margin能讓布局保持應(yīng)有的留白并看上去更平滑，這也是我喜歡960 grid System的原因之一。

在上面的例子中，我們將它使用瀏覽器讀取時(shí)出現(xiàn)了一些問題，現(xiàn)在我們來修復(fù)它。

問題在于每個(gè)列都包含左margin和右margin，但是最左面的列不應(yīng)該有左margin，最右面的列不應(yīng)該有右margin。(夠羅嗦！)下面是解決方法:

<div class=”container_12″>
<div class=”grid_2 alpha”>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2 omega”>advertisement</div>
</div>

你僅需添加alpha類來去除左margin，添加omega類去除右margin。好了，現(xiàn)在我們的布局已經(jīng)可以完美在瀏覽器中對齊了。(是的，包括IE6)

Styling(添加樣式)

事實(shí)上，你已經(jīng)掌握了如何使用960框架創(chuàng)建基本的網(wǎng)格布局了。不過你也許還想為自己的布局添加一些樣式。

<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”photos” class=”grid_2″>photo’s</div>
<div id=”advertisements” class=”grid_2 omega”>advertisement</div>
</div>

由于CSS使用優(yōu)先級的形式來覺得如何解釋樣式，而id要比class的優(yōu)先級高。這樣我們就可以在我們的獨(dú)立CSS文件中以id選擇符創(chuàng)建個(gè)性化的樣式了。如果湊巧有的樣式屬性與960相同但值又不同，瀏覽器會優(yōu)先選擇你的CSS文件中的樣式。當(dāng)然，如果您感興趣，也可以看看上面的實(shí)例添加樣式后的實(shí)際效果。

英文原文:960 CSS Framework – Learn the Basics

本框架代碼適用于所有由yahoo評為A級（A-grade）的瀏覽器，yahoo對瀏覽器的評定情況如下圖所示。?

轉(zhuǎn)載于:https://www.cnblogs.com/keke/archive/2011/03/30/1999969.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的CSS Framework 960 Grid System (收)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。