文章页的排版布局在我看来就两个重点：一是样式布局，二是文字。
样式包含：文章栏位宽度、行距、段距、对齐
文字包含：文字大小、颜色、粗细
除了以上两个重点之外，还有一点就是文章应该是要「分段」还是「一句一行」。
文章排版布局应该要分段或一句一行的问题已经困扰了我很久，我一直没有答案，直到最近我才发现我搞错重点了，问题不是出在于文章要分段或一句一行，问题是在出在于文章页的版型布局。
讲到这里你可能会说，这两者没有什么差别吧？要分段就分段，要一句一行就一句一行，不行吗？
是的，以网上文章来说其实没区别随你高兴，这真的是个人自由，但如果是正规的文章，其实应该是要分段才对。而且以长文章来说，你如果一句一行，这样阅读起来反而会很累，而且没有前后段，读者也会搞不清楚哪边是一个段落。
很多人的文章为什么写出来都是一句一行，很简单，文章栏位太宽了，然后行距又窄，字又太小，如果不一句一行来写，这样文章会非常不易阅读，所以当初我在规划版型布局的时候就有仔细考虑过文章栏位要多宽比较适合。
以目前常见的24寸显示屏1920*1080解析度来说，网站是很少有人会做到版面宽1920px，通常是在1200px左右，你知道为什么吗？因为你做那么宽，反而不适合阅读。
再者，文章栏位要多宽没有标准答案。为何我说文章如果常常一句一行，很有可能是版型的问题。在这边我就不废话了，我直接用我的文章页样式CSS来说明。
文章栏位的css如下：
.article-content {
width:680px; /*栏位宽度*/
font-size:16pt; /*文字大小*/
color:#636363; /*文字颜色*/
line-height: 170%; /*行距*/
text-align:justify; /*分散对齐*/
}.article-content p {
margin-bottom: 1em; /*段距*/ }
文章栏位宽度680px，不要太宽。
文字大小16pt，这样用户不需要放大字也能看的很清楚。
行距170%，其实160%~180%我觉得都行，我这个内容页样式我是觉得170%合适。
文字颜色#636363(深灰色)，不要全黑，要深灰色比较好。
我还设定分散对齐，这样文章左右两边才会对齐，这样比较好看。
再来就是段与段之间的距离，我是设成1em，就是空一行的意思。也就是说你按「enter」就会空一行。怎么设定？就是在文章的<p>，设定margin-bottom: 1em;
补充一下，如果是「shift+enter」这叫换行<br>。
以上是我目前运营网站内文章页的设定，可以让你参考一下，重点很简单，字要够大，行距最少要有160%，这样才不会太挤，然后文章栏位不要太宽，因为太宽的话一行写下来字太多，反而不容易阅读。
接下来继续看文字。
文字简单来说就是文字大小要统一、颜色不要太多，如果要强调就是用粗体。
关于文章的排版，如果刚刚上面的版型都设定好了，这样你就可以很轻松的分段写文章。
再来，文章排版样式要好看，有以下三个重点：
一、文字不要忽大忽小，要整齐
文字不能忽大忽小，你顶多加个粗体，文章最好设定「分散对齐」这样左右两边的文字才会对齐。也不要手动改文字的大小，这样你改天换版型就无法直接从css控制文字大小了。
二、文字不要太多颜色，要统一
文字格式统一从css控制，颜色要统一，不要花花绿绿，文字可以变颜色，但不要乱变颜色。
以我自己来说，我的文章只有三种颜色
- 1.深灰色(内文)
- 2.墨绿色(网友或客户的询问或规格说明)
- 3.橘色(文章内的h2标题)
以上三种颜色在配合粗体，其实已经有六种变化了，这样已经很多了，再多文章真的就会变成花花绿绿了，这样看起来会像是「儿童作文」。
三、对齐
文字要对齐，图片也要对齐，例如我的文章栏位是680px，我的图片宽度一律设成680px，这样图片跟文字就会对齐。
如果图片不想要太大，那么文章中每张图片的宽度要一致，这样看起来会才会对齐。
以上就是网站文章页样式的注意事项。
一开始你的「样式CSS」设计就要弄好，这样你文章写起来才会轻松，你才不用一直在后台「纯手工」调整文字大小。
再就是文字的大小、颜色要统一，图片也要宽度也要尽量统一对齐，这样文章排起来就会好看。
至于要分段还是一句一行，我刚刚上面说了，这跟你的栏位宽度、文字大小，行距、段距有关，如何设定？我刚刚上面有范例，你直接参考一下。
最后还要在补充一点，文章页样式CSS这种问题没有标准答案，因为每个人的模板都不同，每个人的喜好也不同，实际的情况就是要不断的「微调优化」，你就是自己用眼睛看，你自己看，你觉得看起来舒服吗？容易阅读吗？这样答案就出来了。
以百度SEO优化来说，文章内的小标题应该设定成标题<h2>，但有的个人网站模板并没有<h2>的功能，如果一定要设<h2>你要自己进入「CSS源代码」调整，但我觉得这样太累了。
我目前的作法是，如果是小标题我就是加粗体+橘色，这样用户在阅读时也很清楚了，看到橘色加粗这就是小标题。
未经允许不得转载：藤条部落 » 运营实战|文章样式布局注意事项
