最终效果
技术要点
语义化
- 文章使用
<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>
