排版在网页设计中常常被疏忽。其实这是很傻逼的,因为注重网页排版确实可以提高你的网页设计水平和可读性。下面,我列出了10个很是有用的排版技能让你的网站看起来更好。
1、改正行高
最常见的网页布局毛病之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须依照文本字体年夜小来设定行高。
一般来讲,在设置文本行高的时候,我常常在字体年夜小的根本上加上7个像素(对12-17像素的字体而言)
body{
font-size:14px;
line-height:21px; /* 14px + 7px */
}
2、改正题目margin值
别的一个常见的毛病是题目周围不正确的margin值。题目其实是与它下面的段落是相关联的,而不但仅是两个段落的分 割符。这就是为什么题目的margin-top比margin-bottom要宽。
3、不要使用过量的字体
为了确保可读性和专业性,你的网页上不该该使用逾越3种字体。使用过量的字体会干扰你的用户并且让你的网站看起 来很乱。相反,较少的字体让你的网站显得清洁易读。你可以题目使用一种字体,正文使用一种字体,最后 logo或副题目使用别的的字体。
4、代码部分使用等宽字体
如果你是一位开辟者(就像年夜部分读这篇博客的人)你可能想贴一些代码在你的博客里。如果是这样,请使用等宽字体。 那么,什么是等宽字体?它就是字母和字符占相同水平宽度的字体。
那么在网站的代码段你应该使用哪种字体呢? 到目前为止 Courier字体是最风行的,那么测验测验一下最新的一些字体像 Consolas或 Monaco怎么样呢?那你一定要看看这里咯。这里
5、存眷对比
即便你的网站有很好的排版了,另外一个需要注意的是对比。如果你的页面布景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,不然你的内容很难看清,尤其是对一些年纪比较年夜的或视力差的人。
总之,除非你的网站是关于黑客、黑帽搜索引擎优化或哥特摇滚的,不然你应该使用浅色布景和深色字体来包管清晰的对比度增加你网站的可读性。
6、只给链接的文本加下划线
在我上网的12年中,阅读器用在链接的默认样式一直是蓝色文本加下划线。虽然这个蓝色常常被改成别的的颜色,但下划线一直被当作是链接的常规样式。这就是为什么除链接你不要给其他的东西加上下划线的原因。不然,这可能对你的用户造成很年夜的猜疑。
7、成立样式库
让你的网站产生视觉震撼的一个简单高效的体例是给特殊的页面成立特殊的样式。例如,成立一个.warning的CSS类来向 你的用户显示"正告"。
8、按级别来排列题目和文本
为了增加可读性,给题目、介绍段落和常规文本成立标签层级是很重要的,这样你的用户可以看清你的文章布局并能很 快的找到他们感兴趣的部分。
9、年夜胆留白
我认为最重要的排版技能之一是"年夜胆留白"。留白是指空白区或没有使用的空间,它会使你的设计整齐而专业。许多人 喜欢苹果网站的原因是:它虽然简单但很精美,并且有很多留白。
10、正确使用标点符号
如果你想提升你的排版水平不容轻忽的一点是正确使用标点符号。例如,引号经常常使用双撇符号取代(译者注:我想作者要表达的意思应该是全角符号和半角符号的区别,就像中文的引号和英文的引号不合一样)。
注意区分双撇符号:
He said "Hello".
同样的文本,使用引号:
He said "Hello".
这样更好,不是吗?如果你是WordPress用户,你可能很甘愿答应知道你最喜欢的博客平台自动将双撇号转换为智能的引号 。不然,你得使用HTML字符编码。如下所示:
He said &s;ldquo;Hello".
翻译:OSChina