垂直栅格与渐进式行距(上)
作者:宗羲 来源:Taobao.com UED Team 发布时间:2009-04-01 18:30:00
准备工作
去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描、阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.
但是大部分栅格系统是在水平方向上的布局,其实,我们的垂直方向也是有栅格系统的——也就是我们的“垂直韵律”.
垂直韵律的就像好比我们手上拿着的线格本子,有着一行行的网格线,安排着垂直方向上的文字排版。“排版中的空间就像是音乐里的节拍. ”音乐的节拍虽然有许多变化,但是几乎每首歌都会有一个固定的节拍来掌握整个歌曲的节奏. 这就是为什么栅格系统一般用固定宽度的网格阵列来指导和规范网页中的版面布局以及信息分布.
其实,那么,在网页里,垂直韵律应由三个因素控制:
字体大小(font-size)
行距(line-height)
行距间距(margin,padding)
认真考量这三个因素的值,才能实现垂直韵律.
开工
基础行距
在垂直韵律中,基本的单位是行距. 在整个页面上设定一个合适的行距是垂直韵律之所以能够成为韵律的必要条件. 这个行距,我们将应用于整个页面的所有文字上,包括正文、标题、侧边栏等. 例如,我们现在设定我们的字体大小(css font-size)为12px,行距(css line-height)为18px. (对于中文宋体来说,12px是能够清晰显示的最小字号. 为了保证可读性,12px的1.5倍行距就是18px. 同时12px/18px也是中文互联网上最常用的字号和行距. )我们在空白页面的垂直方向上以18px为单位做垂直网格,就像我们线格本子上的线条,每条网格线也就是基线的对齐线. 接着,我们放上三个段落(12px/18px)作为例子讲解.
段落间距
段落间加上段间距不但美观,而且容易在视觉上区别各段落. 但是要注意的是,垂直韵律最容易被打破的地方就是两个元素在垂直方向上的空白了. 所以,为了让下一段的文字内容落在网格内,我们要将段落间距设置为基础的倍数. 例如:我们可以设置段前距为9px,段后距为9px,9px+9px=18px;或者设置段前距(css margin-top)为0,段后距(css margin-bottom)为18px;或者段前距和段后距都是18px. 这里,我们选取第二种方案,即,设置段前距为0,段后距为18px. 图中可以看到,每段段落的文字都落在了格子内. 关闭网格可以发现,段落清晰明了,比之前容易阅读多了.


猜你喜欢
- 我们在使用ASP 内置的ADO组件进行数据库编程时,通常是在脚本的开头打开一个连接,并在脚本的最后关闭它,但是就较大脚本而言,在多
- 在实际工作中,有时候需要对判断字符串是否为合法的json格式解决方法使用json.loads,这样更加符合‘Pythonic'写法代
- 本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考,具体如下:导航栏透明渐变效果实现原理1. 利用position:ab
- 产生跨域问题的原因跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性。跨域问题产生的场景当要在在页面中使用js获取其他网站
- 在windows 2003下,在运行web应用程序的时候出现一下错误: 服务器无法处理请求,-->对路径“C:/temp/mytest.tx
- 当我们拿到一个对象的引用时,如何知道这个对象是什么类型、有哪些方法呢?使用type()首先,我们来判断对象类型,使用type()函数:基本类
- 前言:前面的一章我们展示了选择结构的三种基本形式,并给出了实例演示,但是大家在编写代码过程中仍然要注意一些细节,尤其是代码块的缩进,这对if
- PHP session用法其实很简单它可以把用户提交的数据以全局变量形式保存在一个session中并且会生成一个唯一的session_id,
- setuptools模块和pip模块是python进行第三方库扩展的极重要工具,例如我们在需要安装一些爬虫或者数据分析的包时就可以使用pip
- 前言聚簇索引就是innodb默认创建的基于主键的索引结构,而且表里的数据就是直接放在聚簇索引里,作为叶节点的数据页:基于主键的数据搜索:从聚
- 1.导入模块tkinter:ttk覆盖tkinter部分对象,ttk对tkinter进行了优化copy:深拷贝时需要用到copy模块tkin
- 介绍对于服务器后端开发者而言,有时候需要把自己的一些服务直接暴露给PM或者其他RD使用,这个时候需要搭建一套web服务可以和前端用户做简单交
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> &nbs
- 安装在命令提示符框中直接输入pip install beautifulsoup4介绍beautifulsoup是python的一个第三方库,
- 数据可视化动画还在用 Excel 做?今天分享一个简单的 Python 包就能分分钟搞定!而且生成的动画也足够丝滑,效果是酱紫的:这是一位专
- 变量(variable)是Python语言中一个非常重要的概念。变量的主要作用就是为Python程序中的某个值起一个名字。类似于“张三”、“
- 本文实例讲述了JS学习笔记之数组去重实现方法。分享给大家供大家参考,具体如下:操作的数组 let arr=[0,1,23,'1
- 如果你是我的长期读者,那么你应该知道我在寻找一个完美备份程序,最后我写了一个基于bup的我自己的加密层。在写encbup的时候,我对仅仅恢复
- 目录解决MySQL主从数据库没有同步的两种方法一、不同步情况二、解决方案1.先进入主库,进行锁表,防止数据写入2.进行数据备份3.查看mas
- python版本和ssl版本都会导致 requests在请求https网站时候会出一些错误,最好使用新版本。1 Python2.6x use