網(wǎng)格設(shè)計(jì)，讓網(wǎng)頁設(shè)計(jì)更完美

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

但我了解到網(wǎng)格系統(tǒng)。我忘了什么時候和他們?nèi)绾纬蔀閺V泛應(yīng)用于網(wǎng)頁設(shè)計(jì)，但突然間，每一個網(wǎng)頁設(shè)計(jì)相關(guān)的網(wǎng)站我去擠滿了篇關(guān)于960.gs，或一些其他的網(wǎng)格系統(tǒng)。所有的大人物強(qiáng)調(diào)了我們的布局提供了一個一致的視覺結(jié)構(gòu)的重要性，并成為趨勢。
就像快速的 趨勢成為一個行業(yè)標(biāo)準(zhǔn)，現(xiàn)在我們大多數(shù)人不考慮我們是否正在實(shí)現(xiàn)網(wǎng)格系統(tǒng)。唯一的問題是，哪一個？我們會去一個大公司或是一個鮮為人知的變種，甚至讓我們自己？
在這篇文章中我想來看看第二個選擇：新的和鮮為人知的網(wǎng)格系統(tǒng)。總是有人想出新的方法來解決布局的各種各樣的問題，我想許多熟悉的方法是很重要的，所以我們在看一些基本的網(wǎng)格框架。

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

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

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

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

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

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

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

分享題目：網(wǎng)格設(shè)計(jì)，讓網(wǎng)頁設(shè)計(jì)更完美
轉(zhuǎn)載源于：http://muchs.cn/news/19736.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、自適應(yīng)網(wǎng)站、企業(yè)建站、營銷型網(wǎng)站建設(shè)、虛擬主機(jī)、手機(jī)網(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)