在上篇文章中我提到过，用户总是很快速的浏览和扫描你的文章，这时，你就需要把页面划分成名明确定义的区域。网页的各个部分可以分为导航栏、内容区、图片 区、广告区，各个区域之间可以使用一些视觉处理方法给予区分，相互不能混杂。
今天卢松松要谈的是关于内容区，也就是博客文章部分，如何使文章的排版更加容易阅读，使用正确的对齐和排版方式很重要。
减少用户眼光水平扫视范围，他们阅读或扫描的速度便会大大加快。你可以把较宽的文字段落以较小的宽度显示。
在以文字为主的博客中，在适当的位置加入图标或分隔线，以及具有醒目字体和颜色的标题等等，这些都可以成为用户区分不同内容的有效标记。它们能够为用户把 视觉焦点从一个地方移动到另一个地方提供线索。
看看下面的文本，你的视线是否感觉不太容易集中？
哪怕我们让每一段文字之间多一个回车，稍微加大点行间距，可能要好得多。
下面卢松松就介绍一些常用的用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></blockquote>标签效果是将文 字包围，然后往右边缩进，N组标签可以往右缩进N个单位。
以上代码可以直接放到你网站的CSS文件中使用（注意删除原来的）你也可以自己，调节字体和颜色，改到喜欢为止。然后放到自己的CSS中，方法同上。
总之，介绍了这么多文章排版的方法，目的就是一个，“减少用户思考”。用户在长期使用互联网的过程中已近积累了很多经验。很多网页对他们来说都是不言而喻 的，因为他们已经很熟悉网站的普遍使用方法。所以在设计网站时一定要保持通用性和实用性。请记住下面的话：用户大部分时间都是使用其他网站的。
来源：卢松松博客 QQ/微信：13340454 ，转载请注明出处！
本文地址：https://lusongsong.com/reed/179.html
你关注的人，决定你看到的世界！ 著有《出奇制胜-互联网营销完全攻略》《做最成功的互联网创业者》两本书……
https://lusongsong.com/reed/1.html