|
添加標(biāo)題
使用瀏覽器默認(rèn)的樣式,你會(huì)發(fā)現(xiàn),大多數(shù)情況下,垂直韻律都被打破了. 所以,添加標(biāo)題,我們需要選擇正確的行距和間距才可以.
有了添加段間距的經(jīng)驗(yàn),相信添加標(biāo)題也不是一件難事了. 標(biāo)題的文字要比正文的文字要大的多. 例如,我們現(xiàn)在選擇h1的字體大小為24px.
那么,根據(jù)附錄結(jié)論有：
- 行距和全部垂直間距之和為基礎(chǔ)行距的倍數(shù)。
那么，我們假設(shè)行距為36px,則可以設(shè)置段前距為9px，段后距為9px (驗(yàn)證有：36 + 9 + 9 = 54 = 3 * 18).
同樣，我們也可以設(shè)置h2:字體大小18px，行高24px，段前距3px，段后距9px(驗(yàn)證有：24 + 3 + 9 = 36 = 2 * 18)。
(demo-3.html)
添加邊注
網(wǎng)站我們常常有側(cè)邊欄，我們這里就用右邊的邊注來代表。在這里的例子中，我們和正文一樣設(shè)定邊注的排版：字體12px，行距18px。正是由于我們前面的努力，我們可以看到，邊注的基線和正文的基線是對(duì)齊的。關(guān)閉網(wǎng)格可以看到，由于基線的對(duì)齊，整個(gè)排版有條不紊，十分美觀。
(demo-4.html)
添加邊框
添加邊框道理相同，無非要的就是最后要求基線與網(wǎng)格對(duì)齊。這里的例子中，我們來給邊注加個(gè)邊框吧。給他加上1px邊框(css border)后，還要再加上8px的補(bǔ)白(css padding).細(xì)心的同學(xué)們一定發(fā)現(xiàn)了，為什么補(bǔ)白是8px呢？其實(shí)很簡單，這就是保證垂直方向上的補(bǔ)白和邊框之和，是我們的基礎(chǔ)行高18px的倍數(shù)：垂直方向上兩個(gè)補(bǔ)白兩個(gè)邊框，那么1 + 8 + 8 + 1 = 18.
加上去后，我們發(fā)現(xiàn)，恩？怎么沒有右邊文字沒有對(duì)齊到網(wǎng)格上呢？原來加上了補(bǔ)白和邊框后，邊注下移了9px，所以網(wǎng)格就沒有對(duì)齊啦。那么，我們就要把邊注上移9px�，F(xiàn)在，我們可以看到右邊的文字已經(jīng)對(duì)齊到網(wǎng)格。是不是感覺不錯(cuò)？
(demo-5.html)
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁 垂直柵格與漸進(jìn)式行距(上) [1] 下一頁 垂直柵格與漸進(jìn)式行距(上) [3]
|
第 1 頁 
第 2 頁 垂直柵格與漸進(jìn)式行距(上) [2]
