好看的文章排版样式(转)

左边框，浅色背景内容块，代码如下：
<p style="border-left: 4px solid #cc0417; background: #ffcfd4; color: #b30011; padding: 2px 0 2px 10px;">左边框，浅色背景内容块，代码如下：</p>

这是模块说明 有细边框包围，上边框有说明的内容块，代码如下：
<p style="position: relative; margin: 30px 0 0; border: 1px solid #ae0006; border-radius: 5px; color: #ae0006; padding: 20px 10px;">
<span style="position: absolute; left: 50px; top: -12px; background: #ae0006; color: #fff; padding: 2px 10px;">这是模块说明</span>
有细边框包围，上边框有说明的内容块，代码如下：
</p>

   四个角有角标的内容块，代码如下：
<p style="margin-top:30px;">
<span style="display: block; height: 6px; width: 100%; zoom: 1;">
<span style="display: block; float: left; width: 6px; height: 100%; border-left: 2px solid #ae0006; border-top: 2px solid #ae0006;">&nbsp;</span><span style="display: block; float: right; width: 6px; height: 100%; border-right: 2px solid #ae0006; border-top: 2px solid #ae0006;">&nbsp;</span>
</span>
<span style="display: block; margin: -2px 4px -3px; padding: 10px; background: #ffcfd4; color: #ae0006; border: 1px solid #ae0006;">四个角有角标的内容块，代码如下：</span>
<span style="display: block; height: 6px; width: 100%; zoom: 1;">
<span style="display: block; float: left; width: 6px; height: 100%; border-left: 2px solid #ae0006; border-bottom: 2px solid #ae0006;">&nbsp;</span><span style="display: block; float: right; width: 6px; height: 100%; border-right: 2px solid #ae0006; border-bottom: 2px solid #ae0006;">&nbsp;</span>
</span>
</p>   

转载于:https://www.cnblogs.com/CryOnMyShoulder/p/10516004.html