垂直栅格与渐进式行距(上)（3）
作者：宗羲 来源：Taobao.com UED Team 发布时间：2009-04-01 18:30:00
标签：设计,栅格系统,垂直,栅格
添加边框
添加边框道理相同，无非要的就是最后要求基线与网格对齐。这里的例子中，我们来给边注加个边框吧。给他加上1px边框(css border)后，还要再加上8px的补白(css padding).细心的同学们一定发现了，为什么补白是8px呢？其实很简单，这就是保证垂直方向上的补白和边框之和，是我们的基础行高18px的倍数：垂直方向上两个补白两个边框，那么1 + 8 + 8 + 1 = 18.
加上去后，我们发现，恩？怎么没有右边文字没有对齐到网格上呢？原来加上了补白和边框后，边注下移了9px，所以网格就没有对齐啦。那么，我们就要把边注上移9px。现在，我们可以看到右边的文字已经对齐到网格。是不是感觉不错？
不同字体大小的正文
如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成14px大小的字体，右边的边注保持12px。由于正文字体变大，我们也同时加大行距。根据我们前面学到的知识，我重新设计了间距：
正文：字体大小14px，行距24px，段后距24px
h1：字体大小24px，行距24px，段前距24px，段后距24px
h2：字体大小：18px，行距24px，段前距12px，段后距12px
边注正文：字体大小12px，行距24px，段后距24px
边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px
效果见:
0
投稿猜你喜欢
- ajax开发中, 常遇到下面的几种情况: 1 服务端需要返回一段普通文本给客户端 2 服务端需要返回一段HTML代码给客户端 3 服务端需要
- 我们可用一个函数来实现小数转分数，不过只能转换能够整除的分数：Public Function XtoF(str
- 数据共享是数据库最基本的特征之一。但是数据共享虽然为员工带来了便利，但也产生了一些负面作用。例如因用户并发存取而导致的对数据一致性的破坏、由
- ASP实现语音分时问候,其实asp实现这个功能很容易，时间判断一下，在某个时间段就调用某个的背景语音。下面是源代码：
- 有感于中国互联网设计界十几年的变化，从网页设计师变身界面设计师，和近一两年来兴起的转型交互设计师。大多数都是随着一个行业的兴起而前赴后继的投
- 前言: 这篇文章主要介绍RMAN的常用方法，其中包含了作者一些自己的经验，里面的实验也基本全在WIN 2K和ORACLE 8.1.6环境下测
- SQL Server 2005 和 2008 有几个关于高可用性的选项，如日志传输、副本和数据库镜像。所有这些技术都能够作为维护一个备用服务
window.onload 是页面全部加载完成，包括图片、CSS、JavaScript等。但加载JavaScript的方法有很多种- 注:所有文字,除注明网站类型外,其他均针对企业站点.请随时注意留言,若修改则会在首页提示文字里标注.若牵扯到业务方面的问题,我可能不会做过多
- upload.htm <html><head><title>网站维护 -
- Oracle :NvlNVL函数:NVL函数是将NULL值的字段转换成默认字段输出。NVL(expr1,expr2)expr1,需要转换的字
- Sun周三宣布，准备以10亿美元收购MySQL开源数据库公司。据悉，Sun将支付大约8亿美元现金给MySQL，以获得其私募股票，另外，Sun
- 一: 删除LOG1：分离数据库 企业管理器－＞服务器－＞数据库－＞右键－＞分离数据库2：删除LOG文件3：附加数据库 企业管理器－＞服务器－
- 利用图标工具（有很多）制作图标文件（favicon.ico）上传到网站所在的服务器的根目录下，这个文件必须是16*16大小的图标文件。当然，
- position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览
- 公司客户在使用网站后台编辑添加修改内容时，经常是直接从word文档里复制内容到编辑器里后就提交。结果是在内容显示页面上是五花八门的样式，有时
- 今天老肥让我试试百度知道的新功能：插入地图。该功能需要登录才能操作，因此我意外的发现百度用户登录的弹出层变了。我很喜欢这个改进，利用TAB来
- 前段时间在网上找了一个“完美的”JavaScript对象克隆的函数，感觉还不错，但随后便出现了一些问题，发现这个克隆并不好用，在使用发现了如
- 也许是这样的。下面我们来推荐一个简单的分页程序，代码和说明见下（两段虚线“-----”间的代码是实现该功能的重要语句）：chunfeng.a
- 使用timer来统计asp页面程序的运行时间。实例代码和说明见下：<％Dim varInitial_TimevarIniti
