垂直栅格与渐进式行距(上)(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)。
添加边注
网站我们常常有侧边栏,我们这里就用右边的边注来代表。在这里的例子中,我们和正文一样设定边注的排版:字体12px,行距18px。正是由于我们前面的努力,我们可以看到,边注的基线和正文的基线是对齐的。关闭网格可以看到,由于基线的对齐,整个排版有条不紊,十分美观。


猜你喜欢
- 我的设备上每秒将2000条数据插入数据库,2个设备总共4000条,当在程序里面直接用insert语句插入时,两个设备同时插入大概总共能插入约
- easy_install更准确的说是一个和setuptools绑定的模块,一切下载、构建、安装和管理的工作都可以由它来担当。 一般的执行方式
- 大家好,在之前的文章中详细介绍了time和datetime模块的使用。这两个模块更多的是用于处理时间和日期相关的问题。本文介绍的是第三个模块
- 是的,我在这里要说:注册表单将死(好拗口啊,但是不知道怎么翻译更恰当)。回想一下,当你想享受一个网站服务的时候,碰到的第一件事是什么?一个表
- 第一种:字符串拆分法window.location.href 或者 location.href 或者 window.location 获得地
- 本文主要介绍了Python3 内置函数,分享给大家,具体如下:内置函数以下代码以Python3.6.1为例#coding=utf-8# bu
- 对url进行编码在服务器端我们可以使用asp中的server.urlencode,很方便实现。如:<% ss="asp之家欢
- 原理 采集程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻采集程序,很多都是调用了sina的新闻网页,并且对其中
- 这篇文章主要介绍了深入了解如何基于Python读写Kafka,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 本文实例为大家分享了Python threading模块对单个接口进行并发测试的具体代码,供大家参考,具体内容如下本文知识点通过在threa
- Pytorch测试神经网络时出现“RuntimeError: Error(s) in loading state_dict for Net”
- 函数也是对象要理解Python装饰器,首先要明白在Python中,函数也是一种对象,因此可以把定义函数时的函数名看作是函数对象的一个引用。既
- 最近想实现PHP实现短信验证的效果,做PC网站的时候,可以通过注册用户需要使用短信验证的功能,或者找回密码,以及验证用户的信息等等功能,发现
- 常用当前循环.作用default数据为空时设置默认值length取变量长度filesizeformat文件大小转成可读slice从指定位置到
- 在python 中使用datatime库,可以用来获取现在日期和时间一、datetime库简介datetime有五个类:datetime.d
- 1echarts的基本步骤四步1 找dom容器2 初始化Init3 配置options4 setOptions几乎124的步骤是一样的,op
- css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。red红色等同于 rgb(255,0,0) &nbs
- 本文实例讲述了Python标准库shutil用法。分享给大家供大家参考,具体如下:shutil模块提供了许多关于文件和文件集合的高级操作,特
- <?php//php需要开启ssl(OpenSSL)支持$apnsCert = "ck.
- 阅读上一节:无序列表信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤