「博客文章」浅谈博客文章排版

博客文章

在上篇文章中我提到过，用户总是很快速的浏览和扫描你的文章，这时，你就需要把页面划分成名明确定义的区域。网页的各个部分可以分为导航栏、内容区、图片区、广告区，各个区域之间可以使用一些视觉处理方法给予区分，相互不能混杂。

今天卢松松要谈的是关于内容区，也就是博客文章部分，如何使文章的排版更加容易阅读，使用正确的对齐和排版方式很重要。

减少用户思考时间

减少用户眼光水平扫视范围，他们阅读或扫描的速度便会大大加快。你可以把较宽的文字段落以较小的宽度显示。

在以文字为主的博客中，在适当的位置加入图标或分隔线，以及具有醒目字体和颜色的标题等等，这些都可以成为用户区分不同内容的有效标记。它们能够为用户把视觉焦点从一个地方移动到另一个地方提供线索。

看看下面的文本，你的视线是否感觉不太容易集中？

浅谈博客文章排版博客技巧第1张

（图一）

哪怕我们让每一段文字之间多一个回车，稍微加大点行间距，可能要好得多。

浅谈博客文章排版博客技巧第2张

（图二）

下面卢松松就介绍一些常用的用CSS做文章排版代码。

文章第一段自动空行

每个段落加两个字空行不言而喻吧，非常方便阅读，有两点很重要，第一：一定要替换成你内容页的CSS标签，否则没效果。第二：在编辑器里按“回车”是换行，用的是"P"html语法，按“ctrl+回车”用的是“br”html语法。

例如我博客的内容页使用的CSS是post-info标签，如果这样设置（.post-info p{text-indent:2em;}），意思就是，当你在后台编辑文章时按“回车”，则会自动给文章第一段空出两个字。如图二所示。

文章标题加粗样式

第一种：常见的文字加粗，一般也无需设置属性，点击编辑器加粗即可。当然你也可以单独设置strong属性（注：<B>标签用的少了）。例如我博客的strong标签属性：

.post-info strong{font-family: "微软雅黑", "黑体", "宋体", "Arial Black", "Arial";font-size: 16px;font-weight: 600;}，效果参加本文的加粗文字。

第二种：“可能吧”的加粗风格，其实和第一种方法一样，只是加了个背景色（background-color）而已，具体样式可以设置成，如图三所示。

.post-info strong{font-family: "微软雅黑", "黑体", "宋体", "Arial Black", "Arial";font-size: 16px;font-weight: 600;background-color:#99cccc;}

文章引用样式

看到后台编辑器中的“引用”这个小图标了吗？对，就是这个“blockquote”，引用样式也很重要。blockquote标签在文章编辑方面会给博客文章增色不少。

第一种：博客默认引用样式，一般都不需要修改的，卢松松用的就是默认的。

blockquote {margin: 0 20px;padding: 0 10px 0 25px;border-left: 4px solid #c9ee58;}code {font-family: monospace;color: #666;}

第二种：“可能吧”的引用样式，blockquote左侧的灰边

blockquote{border-left:5px solid #DDD; margin:15px 30px 0 10px; padding-left:20px}

<blockquote></blockquote>标签效果是将文字包围，然后往右边缩进，N组标签可以往右缩进N个单位。

如图所示：

浅谈博客文章排版博客技巧第3张

（图三）

以上代码可以直接放到你网站的CSS文件中使用（注意删除原来的）你也可以自己，调节字体和颜色，改到喜欢为止。然后放到自己的CSS中，方法同上。

用户大部分时间都是使用其他网站的

总之，介绍了这么多文章排版的方法，目的就是一个，“减少用户思考”。用户在长期使用互联网的过程中已近积累了很多经验。很多网页对他们来说都是不言而喻的，因为他们已经很熟悉网站的普遍使用方法。所以在设计网站时一定要保持通用性和实用性。请记住下面的话：用户大部分时间都是使用其他网站的。