好看的文章排版樣式(轉)

左邊框,淺色背景內容塊,代碼以下:
<p style="border-left: 4px solid #cc0417; background: #ffcfd4; color: #b30011; padding: 2px 0 2px 10px;">左邊框,淺色背景內容塊,代碼以下:</p>spa

這是模塊說明 有細邊框包圍,上邊框有說明的內容塊,代碼以下:
<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>it

   四個角有角標的內容塊,代碼以下:
<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>
  io

相關文章
相關標籤/搜索