后面小編給大家分享了顏色比照和字體比照在網(wǎng)頁當(dāng)中的運(yùn)用，明天跟大家分享的是網(wǎng)頁當(dāng)中跟布局嚴(yán)密相關(guān)的區(qū)塊大小比照。
網(wǎng)頁當(dāng)中說到布局設(shè)計，不得不提柵格，柵格是網(wǎng)頁設(shè)計當(dāng)中的根底，它可以幫你確定網(wǎng)頁的各個元素要怎樣放置，讓整個網(wǎng)頁具有標(biāo)準(zhǔn)感和正式感，還具有一種構(gòu)造清楚的設(shè)計感。

其實早在很久之前，柵格早被使用在各個不同范疇。比方我們的如今看到的圖書和報紙。特別是報紙的使用，比擬可以直觀看出各個塊之間的關(guān)系，這些塊也就是網(wǎng)頁當(dāng)中的區(qū)塊。


柵格怎樣運(yùn)用或是怎樣來的，小編就不給大家多講了，文章末尾小編會分享一個建站進(jìn)程中常用到的前端框架和一個柵格零碎工具作爲(wèi)福利送給大家。先仔細(xì)看完上面的內(nèi)容吧！

網(wǎng)站中，一個頁面可以拆分紅多個區(qū)塊，而正是這些區(qū)塊共同構(gòu)成了這個頁面的布局。這些區(qū)塊有大有小，有高有低，構(gòu)成了區(qū)塊的大小比照。在立體當(dāng)中，應(yīng)該叫外形大小的比照。每個網(wǎng)站，都有主次局部，我們會把次要的局部放在顯眼的地位，將主要的內(nèi)容放置在一個小的不顯眼的角落。在頁面設(shè)計中另外一種比照方式就是不同的元素運(yùn)用不同的尺寸。換句話說，就是讓一局部內(nèi)容比其他內(nèi)容更大。在網(wǎng)站布局中就可以用刪格大小來表現(xiàn)這個主次關(guān)系。

從下面的圖可以看出，柵格/區(qū)塊的大小影響著網(wǎng)站的布局，常用的網(wǎng)頁當(dāng)中大局部是12或24柵格。小編復(fù)雜給大家舉幾個例子剖析下：


Norgram數(shù)碼設(shè)計這個網(wǎng)站在區(qū)塊的寬度上做了設(shè)計，網(wǎng)站的區(qū)塊高度都一樣，所以大小的比照就表現(xiàn)在區(qū)塊的寬度上。要曉得正常人的閱讀順序普通都是從左到右，所以網(wǎng)站的右邊區(qū)塊寬度是最大的，到最初的一個區(qū)塊寬度是最小的了。這樣的比照可以叫區(qū)塊的寬度比照。
有寬度比照，就有高度比照，舉例禪道項目管理軟件官網(wǎng)的兩頭局部：


可以很分明的看出下面綠色區(qū)塊的高度比擬低，上面藍(lán)色區(qū)塊的高度比擬高，兩者構(gòu)成的比照就是區(qū)塊的高度比照。柵格布局是很靈敏的，可以看到綠色區(qū)塊的布局和藍(lán)色區(qū)塊布局就不一樣，這樣也構(gòu)成了一定的比照。

大家也可以看看新浪的官網(wǎng)，也是用了柵格零碎，花瓣的瀑布流也可以看出區(qū)塊之間的大小關(guān)系。

柵格零碎會讓整個網(wǎng)頁看起來比擬有規(guī)律，也比擬劃一。在網(wǎng)頁設(shè)計中要學(xué)會善用柵格零碎，可以靈敏變用各個區(qū)塊，這樣全體布局不會千篇一概又可以做到劃一標(biāo)準(zhǔn)。

大家在設(shè)計網(wǎng)頁前可以嘗試一下在多做規(guī)劃，比方區(qū)塊的多少和內(nèi)容的擺放。柵格零碎用起來才干隨心所欲，布局也會更流利，沒事的時分可以多畫畫網(wǎng)站的構(gòu)造圖，多想想怎樣分欄的布局方式來規(guī)劃內(nèi)容。

這是比照準(zhǔn)繩的最初一局部，內(nèi)容不多，但是是最好了解的。所以小編也沒有跟大家說太多實際性的東西，當(dāng)然，作爲(wèi)比照使用的最初一篇，小編也來給大家送個福利感激大家的支持。

福利后面小編也說了，分享的就是我常用的兩個工具，希望也對大家有所協(xié)助。
小編常用的前端框架：zui前端框架。功用比擬多，也很完全，小編截圖沒有截全，感興味的可以去官網(wǎng)看看，這個相對是前端設(shè)計師的福利呀。

第二個引薦的是柵格零碎的小工具：Gridpak，這個在建站的時分也可以起到一定的協(xié)助。

這品種似的柵格工具和前端框架市面上有很多，不論用哪一種，只需合適本人，用起來便捷便可以。
假如大家有更好我工具也歡送大家跟小編分享，畢竟互相學(xué)習(xí)才干共同提高！