收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

10个有用的排版技巧晋升你网站的可读性

2012-07-21 09:21 来源: 卓杰科技 www.zhuojie.cc [ ]

为了增添可读性,给问题、介绍段落和常规文本建树标签层级是很主要的,这样你的用户可以看清你的文章结构并能很 快的找到他们感乐趣的部门。

He said “Hello”.

如不美观你想晋升你的排版水平不容轻忽的一点是正确使用标点符号。例如,引号经常用双撇符号庖代(译者注:我想作者要表达的意思应该是全角符号和半角符号的区别,就像中文的引号和英文的引号分歧一样)。

一般来说,在设置文本行高的时辰,我经常在字体巨细的基本上加上7个像素(对12-17像素的字体而言)

body{

font-size:14px;

line-height:21px; /* 14px + 7px */

}

最常见的网页结构错误之一是界说了不正确的行高。行高是界说一行文本的高度,所以我们必需按照文本字体巨细来设定行高。

He said "Hello".

2、更正问题margin

此吐矣闽常见的错误是问题四周不正确的margin值。问题其实是与它下面的段落是相联系关系的,而不仅仅是两个段落的分 割符。这就是为什么问题的margin-top比margin-bottom要宽。

为了确保可读性和专业性,你的网页上不应该使用跨越3种字体。使用过多的字体味干扰你的用户而且让你的网站看起 来很乱。相反,较少的字体让你的网站显得干生意读。你可以问题使用一种字体,正文使用一种字体,最后 logo或副问题使用此外的字体。

排版在网页设计中经常被忽略。其拭魅这是很傻逼的,因为注重网页排版确实可以提高你的网页设计水安然安祥可读性。下面,我列出了10个很是有用的排版技巧让你的网站看起来更好。

4、代码部门使用等宽字体

那么在网站的代码段你应该使用哪种字体呢? 到今朝为止 Courier字探崆最风行的,那么考试考试一下最新的一些字体像 Consolas或 Monaco怎么样呢?那你必然要看看这里咯。这里

5、关注对比

即使你的网站有很好的排版了,另一个需要注重的是对比。如不美观你的页面布景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,否则你的内容很难看清,尤其是对一些年数斗劲年夜的或视力差的人。

总之,除非你的网站是关于黑客、黑帽seo或哥特摇滚的,否则你应该使用浅色布景和深色字体来保证清楚的对比度增添你网站的可读性。

6、只给链接的文本加下划线

1、更正行高

在我上网的12年中,浏览器用在链接的默认样式一向是蓝色文本加下划线。虽然这个蓝色经常被改成此外的颜色,但下划线一向被当做是链接的常规样式。这就是为什么除了链接你不要给其他的工具加上下划线的原因。否则,这可能对你的用户造成很年夜的思疑。

如不美观你是一位开发者(就像年夜部门读这篇博客的人)你可能想贴一些代码在你的博客里。如不美观是这样,请使用等宽字体。 那么,什么是等宽字体?它就是字母和字符占不异水平宽度的字体。

让你的网站发生视觉震撼的一个简单高效的体例是给非凡的页面建树非凡的样式。例如,建树一个.warning的CSS类来向 你的用户显示“警告”。

8、按级别来枚举问题和文本

9、斗胆留白

3、不要使用过多的字体

我认为最主要的排版技巧之一是“斗胆留白”。留白是指空白区或没有使用的空间,它会使你的设计整洁而专业。良多人 喜欢苹不美观网站的原因是:它尽管简单但很美丽,而且有良多留白。

注重区分双撇符号:     

7、建树样式库

同样的文本,使用引号:     

10、正确使用标点符号

这样更好,不是吗?如不美观你是WordPress用户,你可能很甘愿批准知道你最喜欢的博客平台自动将双撇号转换为智能的引号 。否则,你得使用HTML字符编码。如下所示:

He said &s;ldquo;Hello”.

翻译:OSChina.NET