垂直栅格与渐进式行距(上)
作者：宗羲 来源：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. 图中可以看到,每段段落的文字都落在了格子内. 关闭网格可以发现,段落清晰明了,比之前容易阅读多了.
0
投稿猜你喜欢
- 1、 开始－＞设置－＞控制面板－＞管理工具－＞服务 停止所有Oracle服务。 2、 开始－＞程序－＞Oracle - OraHome81－
- 如果你的网站涉及个人隐私或者机密性非公开的网页，怎样告诉禁止搜索引擎收录抓取，下面侯庆龙说下以下方法，希望对不想被搜索引擎收录抓取网站有所帮
- 1.--区分大小写select * from a where a=’AbCdE’ collate C
第一种方法： 代码如下:Minimsdn.com为您提供的代码: -- Turn ON [Display IO Info when exec- 写入：1:把gif图像文件读入内存（一个变量strTemp）。2:写入数据库。Dim binTmp() As
- 用在产品内容展示的页面上，给产品图片加上提示工具条，鼠标移动图片上即可看到效果，效果还是不错的：带黑白效果和放大图片效果(by misshj
- 左右布局，图片的宽度不固定。正好前几天测试闭合浮动元素时发现了overflow的特殊现象，倒是正好可以用在这里。测试通过：ie6/7&nbs
- 用ASP编写虚拟社区、网上购物等程序时，Application和Session对象具有举足轻重的作用，能够灵活合理地运用这两个对
- 两行JavaScript代码的QQ窗口抖动效果<img id="win" style='pos
- 虽然说表单验证在客户端使用javascript来验证已经可以了，但是我们为了防止访客绕过客户端验证也为了数据安全最好还是在服务器端加上必要的
- 一、Browser Capabilities组件 该组件最主要的作用是：提取识别客户端浏览器的版本信息。其原理是这样的：当客户端浏览器向服务
- SQL Server的以前版本在跟踪对象相关性方面做的并不好。原因是所有的对象相关性都是由对象ID来跟踪的，这意味着对象一开始就必须存在。但
- 注：本文所说的视觉设计师专指网页视觉设计师。网页设计师与平面设计师都归类为设计师，其实这两个职业是跨行业的，虽然有很多设计师一直在跨行业工作
- 设计中文网站的朋友都会有这样的体会，Dreamweaver功能虽然强大，但要按照中文的行文习惯实现每个
- 我们都知道在9i之前，要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到，但它的输
- 应该是开心网(kaixin.com)的宠物功能又升级了，这几次发来的邮件内容不仅不能让我开心，反而让我觉得很恶心。开心网注册也一段时间了，之
- 首先我们知道这个效果应该是一个老话题了。今天整理文件的时候，发现自己以前的一些布局的解决方法躺在文件夹里很长时间了，翻翻老底吧。需要说明的是
- 从AspJpeg1.8 版本开始，AspJpeg 提供了比 PrintText 更为灵活的文本绘图方法PrintTextEx，PrintTe
- 类型主要针对文本属性进行定义。理解“编辑字体列表”和“行高”。二、CSS规则定义之“背景”·背景有背景颜色和背景图像的选择设置。·利于背景图
- 在数据库中，字符型的数据是最多的，可以占到整个数据库的80％以上。为此正确处理字符型的数据，对于提高数据库的性能有很大的作用。在字符型数据中
