网络编程
位置:首页>> 网络编程>> 网页设计>> 垂直栅格与渐进式行距(上)(2)

垂直栅格与渐进式行距(上)(2)

作者:宗羲 来源:Taobao.com UED Team 发布时间:2009-04-01 18:30:00 

标签:设计,栅格系统,垂直,栅格


添加标题

使用浏览器默认的样式,你会发现,大多数情况下,垂直韵律都被打破了. 所以,添加标题,我们需要选择正确的行距和间距才可以.

有了添加段间距的经验,相信添加标题也不是一件难事了. 标题的文字要比正文的文字要大的多. 例如,我们现在选择h1的字体大小为24px.

那么,根据附录结论有:

  • 行距和全部垂直间距之和为基础行距的倍数。

那么,我们假设行距为36px,则可以设置段前距为9px,段后距为9px (验证有:36 + 9 + 9 = 54 = 3 * 18).

同样,我们也可以设置h2:字体大小18px,行高24px,段前距3px,段后距9px(验证有:24 + 3 + 9 = 36 = 2 * 18)。



(demo-3.html)

添加边注

网站我们常常有侧边栏,我们这里就用右边的边注来代表。在这里的例子中,我们和正文一样设定边注的排版:字体12px,行距18px。正是由于我们前面的努力,我们可以看到,边注的基线和正文的基线是对齐的。关闭网格可以看到,由于基线的对齐,整个排版有条不紊,十分美观。






(demo-4.html)

 

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com