2016-09-03 分類: 網站建設
由于一些讀者對于960 Grid System CSS Framework的原理和使用方法比較感興趣,暴風彬彬今天將和大家一同分享這篇關于960 grid CSS Framework的基本原理和簡單的使用方法。
關于CSS框架其實一直是一個比較熱門且很有爭議的話題,的確,國內的一些前端er們越來越關注CSS框架,并都開始嘗試使用,覺得CSS框架能夠節(jié)省更多的開發(fā)時間,顯著提高工作效率。當然,還有很多人持相反意見,認為CSS并沒有這么高級以至于要涉及到框架!我記得在cnBeta上曾經有位程序員諷刺道:”這年頭,連CSS都有框架了?!”。今天暴風彬彬并不是要向大家介紹什么是CSS框架,也不會介紹各種CSS框架的優(yōu)缺點。只是要講解一下目前在國外很熱門的一個框架,嚴格講是網格系統(tǒng),那就是960 Grid System。通過這篇教程你會知道使用960框架之后,你的開發(fā)工作會更快的開展。
960 Grid System 基本原理
首先,你需要學習關于”如何讓框架工作”。你可以通過自己的嘗試來學習,不過我仍然會在這里為大家進行講解,那就開始吧。
不要編輯960.css
先說一點需要注意的:不要編輯960.css文件,如果你修改了它,那么你今后將無法更新這個框架。
讀取網格
在我們使用外部文件中的CSS代碼之前,首先要在我們的HTML文件中調用它們。這兩種容器都是960px的寬度(這就是為什么叫做960 grid),但他們的不同之處是它們包含不同數量的列。顧名思義,.container_12的容器被分為12列,而 .container_16被分為16列。這兩種960px寬的容器都是水平居中的。
Grids (網格)/ Columns(列)
你可以選擇很多種不同的列寬組合,不過在這兩種容器中是有所不同的。你可以通過打開960.css來了解這些寬度,但這對于設計一個網站并沒有什么必要。在這里暴風彬彬將一個很有用的技巧讓你使用框架更加容易。
例如:如果你想在你的容器中僅使用兩列(分別是主內容區(qū)/側邊欄),你可以這樣做:
下面讓我們看看如何編寫四列布局:
正如你看到的,這個系統(tǒng)工作得很好。如果你嘗試使用你的瀏覽器讀取他的話,你會發(fā)現(xiàn)有一些不對勁的地方。不過不要緊,那正是我們下一個話題要討論的。問題在于每個列都包含左margin和右margin,但是最左面的列不應該有左margin,最右面的列不應該有右margin。(夠羅嗦!)下面是解決方法:
你僅需添加alpha類來去除左margin,添加omega類去除右margin。好了,現(xiàn)在我們的布局已經可以好在瀏覽器中對齊了。(是的,包括IE6)事實上,你已經掌握了如何使用960框架創(chuàng)建基本的網格布局了。不過你也許還想為自己的布局添加一些樣式。
由于CSS使用優(yōu)先級的形式來覺得如何解釋樣式,而id要比class的優(yōu)先級高。這樣我們就可以在我們的獨立CSS文件中以id選擇符創(chuàng)建個性化的樣式了。如果湊巧有的樣式屬性與960相同但值又不同,瀏覽器會優(yōu)先選擇你的CSS文件中的樣式。當然,如果您感興趣,也可以看看上面的實例添加樣式后的實際效果。這是這樣!你已經掌握的如何使用960網格系統(tǒng)來創(chuàng)建兼容所有瀏覽器的布局。當你完全掌握熟練960系統(tǒng)之后,你會發(fā)現(xiàn)它為你節(jié)省了很多很多編寫CSS的時間。
當前文章:960 Grid System 基本原理及使用方法
文章位置:http://redsoil1982.com.cn/news/46088.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供網頁設計公司、網站收錄、定制網站、軟件開發(fā)、網站設計公司、域名注冊
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容