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

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


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

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

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


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


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

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

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

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

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

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

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

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