960 Grid System 基本原理及使用方法

由于一些讀者對于960 Grid System CSS Framework的原理和使用方法比較感興趣，暴風(fēng)彬彬今天將和大家一同分享這篇關(guān)于960 grid CSS Framework的基本原理和簡單的使用方法。
關(guān)于CSS框架其實(shí)一直是一個比較熱門且很有爭議的話題，的確，國內(nèi)的一些前端er們越來越關(guān)注CSS框架，并都開始嘗試使用，覺得CSS框架能夠節(jié)省更多的開發(fā)時間，顯著提高工作效率。當(dāng)然，還有很多人持相反意見，認(rèn)為CSS并沒有這么高級以至于要涉及到框架！我記得在cnBeta上曾經(jīng)有位程序員諷刺道:”這年頭，連CSS都有框架了?!”。今天暴風(fēng)彬彬并不是要向大家介紹什么是CSS框架,也不會介紹各種CSS框架的優(yōu)缺點(diǎn)。只是要講解一下目前在國外很熱門的一個框架，嚴(yán)格講是網(wǎng)格系統(tǒng)，那就是960 Grid System。通過這篇教程你會知道使用960框架之后，你的開發(fā)工作會更快的開展。
960 Grid System 基本原理
首先，你需要學(xué)習(xí)關(guān)于”如何讓框架工作”。你可以通過自己的嘗試來學(xué)習(xí)，不過我仍然會在這里為大家進(jìn)行講解，那就開始吧。
不要編輯960.css
先說一點(diǎn)需要注意的:不要編輯960.css文件，如果你修改了它，那么你今后將無法更新這個框架。
讀取網(wǎng)格
在我們使用外部文件中的CSS代碼之前，首先要在我們的HTML文件中調(diào)用它們。這兩種容器都是960px的寬度(這就是為什么叫做960 grid),但他們的不同之處是它們包含不同數(shù)量的列。顧名思義，.container_12的容器被分為12列，而 .container_16被分為16列。這兩種960px寬的容器都是水平居中的。
Grids (網(wǎng)格)/ Columns(列)
你可以選擇很多種不同的列寬組合，不過在這兩種容器中是有所不同的。你可以通過打開960.css來了解這些寬度，但這對于設(shè)計(jì)一個網(wǎng)站并沒有什么必要。在這里暴風(fēng)彬彬?qū)⒁粋€很有用的技巧讓你使用框架更加容易。
例如:如果你想在你的容器中僅使用兩列(分別是主內(nèi)容區(qū)/側(cè)邊欄)，你可以這樣做:

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

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

正如你看到的，這個系統(tǒng)工作得很好。如果你嘗試使用你的瀏覽器讀取他的話，你會發(fā)現(xiàn)有一些不對勁的地方。不過不要緊，那正是我們下一個話題要討論的。
Margins
默認(rèn)情況下，每列之間都會存在一些margin。每個grid_(這里插入數(shù)值)類都有10px的左margin和右margin。也就是說兩列之間的margin值是20px。
20px的margin能讓布局保持應(yīng)有的留白并看上去更平滑，這也是我喜歡960 grid System的原因之一。
在上面的例子中，我們將它使用瀏覽器讀取時出現(xiàn)了一些問題，現(xiàn)在我們來修復(fù)它。

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

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

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

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

這是這樣！你已經(jīng)掌握的如何使用960網(wǎng)格系統(tǒng)來創(chuàng)建兼容所有瀏覽器的布局。當(dāng)你完全掌握熟練960系統(tǒng)之后，你會發(fā)現(xiàn)它為你節(jié)省了很多很多編寫CSS的時間。

當(dāng)前名稱：960 Grid System 基本原理及使用方法
瀏覽地址：http://www.bm7419.com/news38/46088.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、服務(wù)器托管、全網(wǎng)營銷推廣、網(wǎng)站制作、微信小程序、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)