用Photoshop制作960網(wǎng)格的網(wǎng)頁模板

網(wǎng)格設(shè)計(jì)呢，通常顯得很整齊規(guī)范，有時(shí)看上去也比較專業(yè)。但網(wǎng)格設(shè)計(jì)相對來說也是比較復(fù)雜的，往往需要精準(zhǔn)的測量和欄目劃分。960 Grid System/960網(wǎng)格系統(tǒng)，這是一套可以讓你快速創(chuàng)建網(wǎng)格設(shè)計(jì)的工具，之所以叫960，就是說模板的寬度是960像素。而之所以用960像素來做為標(biāo) 準(zhǔn)，是因?yàn)?60像素寬具有高度的靈活性。今天我們就來教大家制作一個(gè)960 Grid System的網(wǎng)頁模板。（960 Grid System官方網(wǎng)站：https://img.lvups.com/d/file/bigpic/2022/12/26/3cjhlez3b2r

960 Grid System的特性是將960像素的網(wǎng)頁分為12列的布局和16列布局。12列布局將總寬分成12份，每份的寬度是60px，而16列的布局分成16份，每份的寬度是40px，每部分左右邊距都是10px，從而每列產(chǎn)生20px的空隙。

先看最終效果圖

按照960 Grid System的定義，我們找一張960像素，12等份，每部分左右邊距都是10px。這里縮小了圖片，大家做的時(shí)候按照960像素去切割，去960 grid system官方網(wǎng)站可以下載布局好的素材。（參見"960 grid system"的官方網(wǎng)站介紹。）