css代码:
/* 文章 */
article{letter-spacing: .03em;}
article a{word-break: break-all;}
article > *{ margin-bottom: 1em }
article > *:last-child{ margin-bottom: 0 }
article h1, article h2, article h3{ font-size: 1.2em }
article h4, article h5, article h6{ font-size: 1.1em }
article ul, article ol, article dl{ line-height: 1.8 }
html引用代码:
<article>
<p>且说李傕、郭汜既掌大权,残虐百姓;<a href="/">密遣心腹侍帝左右</a>,观其动静。献帝此时举动荆棘。朝廷官员,并由二贼升降。因采人望,<a href="/">特宣朱儁入朝封为太仆</a>,同领朝政。一日,人报西凉太守马腾;并州刺史韩遂二将引军十余万,杀奔长安来,声言讨贼。原来二将先曾使人入长安,结连侍中马宇、谏议大夫种邵、左中郎将刘范三人为内应,共谋贼党。三人密奏献帝,封马腾为征西将军、韩遂为镇西将军,各受密诏,并力讨贼。当下李傕、郭汜、张济、樊稠闻二军将至,一同商议御敌之策。谋士贾诩曰:<h1>“二军远来</h1>,只宜深沟高垒,坚守以拒之。不过百日,彼兵粮尽,<h4>必将自退</h4>,然后引兵追之,二将可擒矣。”李蒙、王方出曰:“此非好计。愿借精兵万人,立斩马腾、韩遂之头,献于麾下。”贾诩曰:“今若即战,必当败绩。”李蒙、王方齐声曰:“若吾二人败,情愿斩首;吾若战胜,公亦当输首级与我。”诩谓李傕、郭汜曰:
<ul>“长安西二百里盩厔山,其路险峻,可使张、樊两将军屯兵于此,</ul>
<ol>坚壁守之;待李蒙、王方自引兵迎敌,可也。</ol>”李傕、郭汜从其言,点一万五千人马与李蒙、王方。二人忻喜而去,离长安二百八十里下寨。</p>
<blockquote>《三国演义》第十回 勤王室马腾举义 报父仇曹操兴师</blockquote>
</article>
默认将所有 article 标签的子元素做了排版优化,增加间距、设置新的换行机制等,减少重复编写对应的排版样式代码。
效果如下: