主頁 > 知識庫 > CSS重新定義項目符號和編號技巧

CSS重新定義項目符號和編號技巧

熱門標(biāo)簽:南通電話外呼系統(tǒng)開發(fā) 沸思外呼線路 400電話辦理安徽 北京銷售外呼系統(tǒng)線路 江西防封卡外呼系統(tǒng)怎么安裝 南寧外呼電銷系統(tǒng)招商 電銷機(jī)器人的宣傳語 電銷智能機(jī)器人靠譜么 石家莊電話機(jī)器人電話
用過Word的人都知道Word 有一個“項目符號和編號”的功能,用起來很方便。Dreamweaver3的屬性面板也有一個類似有的“項目符號和編號”的圖標(biāo)按鈕,產(chǎn)生自動列表功能, 但它只有兩種形式,即方塊和阿拉伯?dāng)?shù)字。不過我們可以利用Dreamweaver3的CSS定義功能去重新定義“列表符號的格式”。下面以定義一個“大寫 羅馬數(shù)字項目列表符號”為例來說明其使用方法:

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

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

2、我來解釋一下上圖中這個列表中各項的含義:

disc:實心圓;

circle:空心圓;

square:實心方塊;

decimal:十進(jìn)制數(shù)字;

lower-roman:小寫羅馬數(shù)字;

upper-roman:大寫羅馬數(shù)字;

lower-alpha:小寫英文字母;

upper-alpha:大寫英文字母;

none:不顯示項目符號和編號。

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

〈style type="text/css"〉

〈!--

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

--〉

〈/style〉

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

3、這樣當(dāng)我們在設(shè)計網(wǎng)頁時,在屬性面板上點擊項目編號圖標(biāo)

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

若是要使按下

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

〈style type="text/css"〉

〈!--

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

--〉

〈/style〉

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

標(biāo)簽:衢州 北海 來賓 云南 晉中 鹽城 寧夏 陽泉

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS重新定義項目符號和編號技巧》,本文關(guān)鍵詞  CSS,重新,定義,項目,符號,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS重新定義項目符號和編號技巧》相關(guān)的同類信息!
  • 本頁收集關(guān)于CSS重新定義項目符號和編號技巧的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章