1、按F7（或點(diǎn)擊快速啟動(dòng)欄里那個(gè)象“八卦圖”似的圖標(biāo)），調(diào)出CSS面板，選擇 “none”，再點(diǎn)擊面板下部的編輯圖標(biāo)，在彈出的“Edit Style Sheet”對(duì)話框上按“New”按鈕，在彈出的“New Style”對(duì)話框中選擇“Redifine HTML TAG（重定義HTML標(biāo)記）”后，在下面的“Tag”選擇框中選擇“ol”，按OK，立即彈出“Style Definition for ol”對(duì)話框，如下圖所示：

在“Style Definition for ol”對(duì)話框左邊的選擇窗口中選擇“l(fā)ist”，在右邊的面板上我們只要定義“Type”就行了，點(diǎn)一下右邊那個(gè)三角形按鈕，可看到如下圖所示的列表：

2、我來(lái)解釋一下上圖中這個(gè)列表中各項(xiàng)的含義：

disc：實(shí)心圓；

circle：空心圓；

square：實(shí)心方塊；

decimal：十進(jìn)制數(shù)字；

lower-roman：小寫(xiě)羅馬數(shù)字；

upper-roman：大寫(xiě)羅馬數(shù)字；

lower-alpha：小寫(xiě)英文字母；

upper-alpha：大寫(xiě)英文字母；

none：不顯示項(xiàng)目符號(hào)和編號(hào)。

很顯然，在本例中要選擇“upper-roman”，然后按OK返回（要注意 “Bullet”屬性現(xiàn)在不要選，否則有可能就不是預(yù)期的結(jié)果了）。在“Edit Style Sheet”對(duì)話框上按“Done”按鈕結(jié)束。在網(wǎng)頁(yè)源代碼的〈head〉與〈/head〉之間見(jiàn)到的CSS代碼是這樣的：

〈style type="text/css"〉

〈!--

ol { list-style-type: upper-romancircle}

--〉

〈/style〉

對(duì)于不是使用Dreamweaver3的網(wǎng)友，直接把上述代碼復(fù)制在〈head〉與〈/head〉之間，產(chǎn)生的效果相同。

3、這樣當(dāng)我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)，在屬性面板上點(diǎn)擊項(xiàng)目編號(hào)圖標(biāo)

就能獲得大寫(xiě)羅馬數(shù)字的列表了，但在編輯時(shí)看到的還是十進(jìn)制編號(hào)，只有在瀏覽時(shí)才顯示其本來(lái)面目。若需要其它格式的編號(hào)，只要在第二步中選擇列表中的其它樣式就行了。

若是要使按下

圖標(biāo)后，項(xiàng)目符號(hào)前面那個(gè)圖形（默認(rèn)的是實(shí)心方塊）也改變?yōu)閿?shù)字編號(hào)，只要在第一步中選擇“Tag”標(biāo)記時(shí)不要選“ol”而改為選“ul”，其它操作完全相同。如要把它改成用大寫(xiě)羅馬數(shù)字項(xiàng)目符號(hào)，則得到的CSS代碼是這樣的：

〈style type="text/css"〉

〈!--

ul { list-style-type: upper-romancircle}

--〉

〈/style〉

從這里可以看，這兩個(gè)圖標(biāo)所起的作用基本相同，只是標(biāo)記不同而已。

HTML/CSS技術(shù)：CSS重新定義項(xiàng)目符號(hào)和編號(hào)技巧，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。