dt標籤使用CSS->before建構內容加上nth-child()產生中文數字編號一、二、三-教學撰寫:徐嘉裕Neil hsu

在做網頁編排最常見的問題就是CSS的list-style-type無法產生中文數字如一、二、三，如果直接吧內文加上中文數字沒段行還好，字太多時會分切兩行，第二行的文字開頭會對齊左邊基線，像下圖這樣

如果有強迫症的人看了會很不舒服，解決方法就是吧內文的一、二、三拿掉，然後再標題的dt標籤用before建構內容+nth-child()判斷列數產生一、二、三，就可以做出像以下的排版方式，第二行由數字後開始顯示。

這樣就美觀多了~遇到處女座的客戶也不會有問題，製作方法如下

1、HTM:結構吧內文標題的一、二、三拿掉(紅字為標題)

<dl>

<dt>以學生為中心：發展以學生為中心，教學優先的核心價值。培養學生新三好運動。</dt>

<dd>

1.把書讀好：養成終生學習的能力<br />

2.身要練好：養成終生運動的能力<br />

3.人要做好：養成終生反省的能力

</dd>

<dt>以專業為依歸：教師有專業、行政有效能。</dt>

<dd>

1.活力行政：力持「依法行政、穩健成長」的經營要領。<br />

2.專業教師：提升教師教學專業能力，形塑專業形象。<br />

3.建立專業社群之學校文化，建立團隊學習機制，以專業對話、團隊學習的機制，落實教學品質保證。

</dd>

<dt>愛、榜樣與熱誠：打造「溫馨校園、全人教育、終身學習」的辦學環境。</dt>

</dl>

2、CSS部分加上以下CODE

dt{
position: relative;
font-size: 115%;
padding: 10px 0px 10px 50px;
color: #174960;
line-height: 170%;
}


dt:nth-child(1)::before{
position: absolute;
left: 0px;
content:"一、";
}

dt:nth-child(3)::before{
position: absolute;
left: 0px;
content:"二、";
}

dt:nth-child(5)::before{
position: absolute;
left: 0px;
content:"三、";
}

就是在每個dt標籤都用before建構一、二、三，然後使用nth-child()判斷內容的1.3.5為dt標題，這樣就可以做出工整排版的效果，有需的朋友可以參考看看!

工作心的撰寫：徐嘉裕 Neil hsu