轉帖|其它|編輯:郝浩|2009-04-01 17:46:57.000|閱讀 456 次
概述:我們知道網頁的柵格系統是運用固定的格子設計版面布局,使其風格工整簡潔. 視覺上來說,柵格系統能夠將大塊區域分割成小區域,清楚地展示頁面的布局,并能夠引導視覺線在各個板塊之間掃描、閱讀. 從信息上來說,柵格系統讓信息的呈現方式更加直觀,從而有效提高易讀性.
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
不同字體大小的正文
如果有一天,老板告訴你,正文的字體太小啦,他看得眼花。你因此不得不將左邊的正文設置成14px大小的字體,右邊的邊注保持12px。由于正文字體變大,我們也同時加大行距。根據我們前面學到的知識,我重新設計了間距:
效果見:
完工
OK,最后,我們來做個使用前使用后的對比,來張合照吧:
使用前:
使用后:
附錄 基本垂直韻律對行距、間距的要求的推導
根據之前的經驗,不難得出:
設行距為 dl px ,設垂直方向上的間距和為 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假設基礎行距為k px,則
n*k = dl + ∑ds (n為自然數) 即行距和間距之和應當是18的倍數 ②
由方程①、② 得出:
行距和全部垂直間距之和為18的倍數。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:藍色理想