純屬巧盒

日前用部落格內建的所見即所得編輯器 (WYGIWYS Editor) 發表97年5、6月份統一發票中獎單，忘記 WYGIWYS 會產生一推多餘的標籤，心血來潮以網頁標準將內容 HTML 與 樣式 CSS 分離重新設計。

CSS

#uin{<br /> font-size:20px;/*文字大小*/<br /> line-height:1.7;/*加大行高*/<br /> text-align:center;/*文字置中*/<br />}<br />#uin h3{<br /> font-size:140%;/*文字大小*/<br />}<br />#uin p{<br /> border:2px solid red;/*2px 紅色邊框*/<br /> padding-left:5px;/*向左移 5px*/<br /> background:#FFC;/*背景色彩*/<br /> font-size:95%;/*文字大小*/<br />}<br />#uin dt{<br /> color:#fff;/*文字色彩*/<br /> background:#000;/*背景色彩*/<br />}<br />#uin dd{<br /> letter-spacing:10px;/*文字間隔 10px*/<br /> margin:0/*邊界為 0*/<br />}<br />#uin strong{<br /> color:red/*文字色彩*/<br />}

HTML

<h3>97年5、6月統一發票中獎號碼單</h3><br /><p>領獎期間自97年8月6日起至97年11月5日止。</p><br /><dl><br /><dt>特獎</dt><br /><dd>65445893</dd><br /><dt>頭獎</dt><br /><dd>32299<strong>517</strong></dd><br /><dd>48636<strong>521</strong></dd><br /><dd>94183<strong>545</strong></dd></dl>