前面小編給大家分享了色彩對比和字體對比在網頁當中的運用徐许，今天跟大家分享的是網頁當中跟布局緊密相關的區(qū)塊大小對比。
網頁當中說到布局設計卒蘸，不得不提柵格雌隅，柵格是網頁設計當中的基礎，它可以幫你確定網頁的各個元素要怎么放置缸沃，讓整個網頁具有規(guī)范感和正式感恰起，還具有一種結構分明的設計感。
其實早在很久之前趾牧，柵格早被應用在各個不同領域检盼。比如我們的現在看到的圖書和報紙。特別是報紙的應用翘单，比較可以直觀看出各個塊之間的關系吨枉，這些塊也就是網頁當中的區(qū)塊。
柵格怎么運用或是怎么來的哄芜，小編就不給大家多講了貌亭，文章末尾小編會分享一個建站過程中常用到的前端框架和一個柵格系統工具作為福利送給大家。先認真看完下面的內容吧认臊！
網站中圃庭，一個頁面可以拆分成多個區(qū)塊，而正是這些區(qū)塊共同構成了這個頁面的布局。這些區(qū)塊有大有小剧腻，有高有低拘央，形成了區(qū)塊的大小對比。在平面當中书在，應該叫形狀大小的對比灰伟。每個網站，都有主次部分蕊温，我們會把主要的部分放在顯眼的位置袱箱，將次要的內容放置在一個小的不顯眼的角落。在頁面設計中另外一種對比方式就是不同的元素使用不同的尺寸义矛。換句話說，就是讓一部分內容比其他內容更大盟萨。在網站布局中就可以用刪格大小來體現這個主次關系凉翻。
從上面的圖可以看出，柵格/區(qū)塊的大小影響著網站的布局捻激，常用的網頁當中大部分是12或24柵格制轰。小編簡單給大家舉幾個例子分析下：
Norgram數碼設計這個網站在區(qū)塊的寬度上做了設計，網站的區(qū)塊高度都一樣胞谭，所以大小的對比就體現在區(qū)塊的寬度上垃杖。要知道正常人的閱讀順序一般都是從左到右，所以網站的左邊區(qū)塊寬度是最大的丈屹，到最后的一個區(qū)塊寬度是最小的了调俘。這樣的對比可以叫區(qū)塊的寬度對比。
有寬度對比旺垒，就有高度對比彩库，舉例禪道項目管理軟件官網的中間部分：
可以很明顯的看出上面綠色區(qū)塊的高度比較低，下面藍色區(qū)塊的高度比較高先蒋，兩者形成的對比就是區(qū)塊的高度對比骇钦。柵格布局是很靈活的，可以看到綠色區(qū)塊的布局和藍色區(qū)塊布局就不一樣竞漾，這樣也形成了一定的對比眯搭。
大家也可以看看新浪的官網，也是用了柵格系統业岁，花瓣的瀑布流也可以看出區(qū)塊之間的大小關系鳞仙。
柵格系統會讓整個網頁看起來比較有規(guī)律，也比較整齊叨襟。在網頁設計中要學會善用柵格系統繁扎，可以靈活變用各個區(qū)塊，這樣整體布局不會千篇一律又可以做到整齊規(guī)范。
大家在設計網頁前可以嘗試一下在多做規(guī)劃梳玫，比如區(qū)塊的多少和內容的擺放爹梁。柵格系統用起來才能得心應手，布局也會更流暢提澎，沒事的時候可以多畫畫網站的結構圖姚垃，多想想怎樣分欄的布局方式來規(guī)劃內容。
這是對比原則的最后一部分盼忌，內容不多积糯，但是是最好理解的。所以小編也沒有跟大家說太多理論性的東西谦纱，當然看成，作為對比應用的最后一篇，小編也來給大家送個福利感謝大家的支持跨嘉。
福利前面小編也說了川慌，分享的就是我常用的兩個工具，希望也對大家有所幫助祠乃。
小編常用的前端框架：zui前端框架梦重。功能比較多，也很齊全亮瓷，小編截圖沒有截全琴拧，感興趣的可以去官網看看，這個絕對是前端設計師的福利呀嘱支。
第二個推薦的是柵格系統的小工具：Gridpak蚓胸，這個在建站的時候也可以起到一定的幫助。
這種類似的柵格工具和前端框架市面上有很多斗塘，不管用哪一種赢织，只要適合自己，用起來便捷便可以馍盟。
如果大家有更好我工具也歡迎大家跟小編分享于置，畢竟相互學習才能共同進步！
