最终效果

实战范例——中文文章排版_css

技术要点

语义化

  • 文章使用​​<article></article>​​ 标签
  • 段落使用​​<p></p>​​ 标签

居中

/* 盒子在父盒子内水平居中 */
margin: 0px auto;

最佳视距

网页视距在 500~800px比较合适

最佳行高

行高通常为1.6~1.8

段落首行空两格

text-indent: 2em;

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    　　
    <title>演示范例--中文文章</title>
    　　
  </head>
  <body>
    <article>
      <h1>百感交集的记忆之门</h1>
      <p>
        一首歌，一阵轻风，万条雨丝，一种气味，一道风景乃至一片小小的树叶都是一把钥匙，都会打开我的记忆之门，令我想起许多往事。
      </p>
      <p>
        我大概是因为不习惯向人倾诉，记忆中的那许多酸甜苦涩，我总喜欢在自己独处孤寂时回味人生。那快乐的、忧伤的、兴奋的、沮丧的点点滴滴，或让我轻轻摇头一笑，或许拍案泪滢追悔，最终却又得是暗叹，时光的飞逝，岁月的无情，因为这或凄美或不堪回首的日子，都己离我远去了。只留下记忆的行囊，伴我走向未知的日子，转头望过去，我那30多年的路境只是如梦一般飘渺，不见学到、得到什么、只是一路上丢弃了天真、诚实、无私、还有真诚，也让我习惯了深深的叹息，“岁月磋跎”
        ！
      </p>
      <p>
        但我不是一个悲观的人，因为我正年轻，我还有很多回忆，我喜欢记忆中的往事刺痛自己，激励自己，因为我有30岁的青春。所以，尽管我的过去如梦，但我的未来不会是梦……………
      </p>
    </article>
    <style>article {
        /* 盒子在父盒子内水平居中 */
        margin: 0px auto;
        /* 网页视距在 500~800px比较合适 */
        width: 600px;
        /* 行高，通常为1.6~1.8 */
        line-height: 1.8;
      }
      h1 {
        /* 标题水平居中 */
        text-align: center;
      }
      p {
        /* 中文段落，首行空两格 */
        text-indent: 2em;
      }</style>
  </body>
</html>