網(wǎng)格設計，讓網(wǎng)頁設計更完美

成都網(wǎng)站制作作為一個設計師，我一點也不關心我的設計中關于結構。我會打開PS圖象處理軟件，推 像素直到我做了一件我認為看起來很酷。我學會了代碼，我的過程同樣是偶然的。
我不回頭看過去，太多的愛。我的工作是草率和不。我沒有明確的目標。作為一個開始，我想這并不是太糟，考慮到我的大部分設計教育來自PS圖象處理軟件的教程網(wǎng)站，我的工作不可怕。

但我了解到網(wǎng)格系統(tǒng)。我忘了什么時候和他們如何成為廣泛應用于網(wǎng)頁設計，但突然間，每一個網(wǎng)頁設計相關的網(wǎng)站我去擠滿了篇關于960.gs，或一些其他的網(wǎng)格系統(tǒng)。所有的大人物強調了我們的布局提供了一個一致的視覺結構的重要性，并成為趨勢。
就像快速的 趨勢成為一個行業(yè)標準，現(xiàn)在我們大多數(shù)人不考慮我們是否正在實現(xiàn)網(wǎng)格系統(tǒng)。唯一的問題是，哪一個？我們會去一個大公司或是一個鮮為人知的變種，甚至讓我們自己？
在這篇文章中我想來看看第二個選擇：新的和鮮為人知的網(wǎng)格系統(tǒng)?？偸怯腥讼氤鲂碌姆椒▉斫鉀Q布局的各種各樣的問題，我想許多熟悉的方法是很重要的，所以我們在看一些基本的網(wǎng)格框架。

簡單的網(wǎng)格系統(tǒng)
34GRID
34grid 是所有關于平等的分布列。它可以容納不同的分配為好，但那不是這個網(wǎng)格系統(tǒng)的主要用途。對于那些你想將所有或大部分你的頁面為橫向等分，這是你的框架。
工作原理
該框架的設計是適應您的需要，所以你不只是下載去。你需要配置你的網(wǎng)格項目的主頁。一個快速的形式允許你確定多少列將適合在一排，你的利潤會有多大，以及是否使用CSS3轉換你的列時，視口的尺寸變化。
代碼本身是分為兩個CSS文件：一個基碼，和所有的媒體查詢。簡單的CSS類。應用”。col_1”列將排100%。”。col_2”將創(chuàng)建一個寬度為50%列，等等。
此外，IMG元素的對象，有些是自動調整大小。有一個額外的類來幫助視頻對象。該項目的網(wǎng)站提供建議如何讓臉譜網(wǎng)和推特嵌入發(fā)揮不錯。
缺點
似乎沒有任何辦法巢列，或創(chuàng)建更復雜的欄目安排在一個單排。另一方面，如果你不需要復雜，你只是想要一個簡單的框架，你可以調整你的需要，34grid將做的工作。

簡單的網(wǎng)格
簡單的網(wǎng)格 是一個敏感的選項，高1140像素的寬度。換句話說，雖然它的目的是發(fā)揮好與平板電腦和手機，簡單的網(wǎng)格可以確保更大的屏幕不離開。
工作原理
正如其名字所暗示的，這個網(wǎng)格系統(tǒng)是相當輕。整件事在一四字節(jié)壓縮CSS文件。
類名稱的設計可以很容易地理解：'。col-2-6 '將排成六列，并定義列寬兩欄寬。每行可分為一列，”。col-1-1 '，或二，三，四，等，一直到十二。
缺點
像34grid，似乎沒有為嵌套列的任何規(guī)定。同時，空間處理的第一個和最后一個專欄的方式，可能會造成困難，在創(chuàng)造的時候，例如，一個相冊。

干杯
這一個 是任何人誰喜歡一個簡單的網(wǎng)格與普通英語課的名字。這是敏感的，容易理解，并迅速實施。
工作原理
在你平時的'容器'和'。到位是網(wǎng)格的元素，欄目實行老辦法。一類（“單位”）是用來定義一列的一般屬性，另一類是用于定義寬度。行可分為2-5列，和類的名字都是這個樣子的：'。三個，三個”。
還包括一些基本的排版樣式。
缺點
再次，這是一個網(wǎng)格框架意味著簡單的布局，所以沒有提供嵌套列。也只有一個破發(fā)點，設置在650像素視口寬度，所以你的一些列可能過早結束而寬。

先進的網(wǎng)格系統(tǒng)
比例網(wǎng)格
馬特（又名恩）有點像我。他喜歡的設計，但是不喜歡數(shù)學一樣。作為一個結果，他比例網(wǎng)格 似乎做了無數(shù)的計算盡可能的根據(jù)盒尺寸財產(chǎn)結果是一個完整的，但仍然很輕，網(wǎng)格系統(tǒng)，包括你的響應布局基地。
工作原理
當我說這個系統(tǒng)依賴盒尺寸我的意思是，列，給出了百分比寬度不占水槽。固定寬度的槽定義襯墊；和盒尺寸確保列好好地玩在一起。
排水溝的寬度和大多數(shù)其他的測量是由“EMS”。真正的網(wǎng)格的名稱、列類比例（即Col三分之一。，Col三分之二。），和列都或多或少的無窮嵌套的，這是我非常喜歡的。
課程包括三個不同的突變點換柱尺寸。媒體查詢本身的結構在“移動第一”的時尚，符合標準的做法。
在Internet Explorer 8以上的一個單獨的樣式表。因為IE8不支持媒體查詢，并且不支持舊版本比盒尺寸，他們有一個固定寬度的布局。
還包括薩斯（，SASS，SCSS）快速和容易的定制的網(wǎng)格文件系統(tǒng)。
缺點
我不介意一些列的寬度的工作（五、六、八）。否則，這是一個很大的錯誤的自由和全面的網(wǎng)格系統(tǒng)。

先進的網(wǎng)格系統(tǒng)在這個名單，一% 是最簡單的，但它絕不是不完整的。它的設計以適應更大的屏幕，和大的UI元素，如果它的主頁是任何跡象。
這個名字來自這樣一個事實：網(wǎng)格列的寬度進行計算，它總是等于99%，而不是100%。這消除了一些更復雜的循環(huán)小數(shù)，數(shù)舍入，瀏覽器往往被迫做的需要。
工作原理
網(wǎng)格本身分為經(jīng)典的十二列。這類簡單的（蔬果。，2。，。col6），我喜歡你，是的，只使用一個類的每列。
兩個破發(fā)點包括默認：768像素和1024像素。如果我是誠實的，第一個似乎有點…大…但你總是可以如果你需要添加另一個突破點。還提供了兩個桌面布局寬度的例子：1000像素，1200像素。
在項目的主頁上，你可以下載PS圖象處理軟件的行動文件，適合模擬您的布局與該網(wǎng)格系統(tǒng)介紹。
缺點
我的兩個大問題，這是通常的。第一：沒有嵌套列。嵌套列好，人！第二：在每行最后一列需要有最后。這類應用。

一個跨瀏覽器的CSS網(wǎng)格框架，不隱藏像素邊緣！這是宣傳口號flurid， 和快速瀏覽的文檔會告訴你為什么：flurid的創(chuàng)造者真正地不想讓你的布局打破。曾經(jīng)。
這里的事情，因為路亞像素舍入，瀏覽器偶爾會說“擰”，把最后一列的列不應該去的地方。flurid建立穩(wěn)定，這樣你的布局會一直工作，甚至在舊版本的IE瀏覽器（兼容IE5 +上市。）

工作原理
flurid擁有所有你需要的功能：普通柱、混合柱、嵌套列，和轉向柱?？赡艿牧械膶挾群桶嗉壝麊问菑V泛的，并且比為基礎的，所以你要給自己時間去熟悉。
某些相當完整的文檔是通過GitHub，以及一個jQuery插件，添加額外的功能，是的，它有自己的jQuery插件，它提供了高度相等的列，可以把交流課上你列，你的造型的樂趣。
缺點
這是討厭的最后。再上課。不過，根據(jù)文檔，這是時間的一個很好的理由。

網(wǎng)站名稱：網(wǎng)格設計，讓網(wǎng)頁設計更完美
標題路徑：http://www.bm7419.com/news36/19736.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、外貿(mào)建站、網(wǎng)站制作、建站公司、定制開發(fā)、電子商務

廣告

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