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

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

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

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

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

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

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

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

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

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

網(wǎng)站名稱：網(wǎng)格設(shè)計(jì)，讓網(wǎng)頁(yè)設(shè)計(jì)更完美
標(biāo)題路徑：http://www.muchs.cn/news36/19736.html

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

廣告

聲明：本網(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)