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