位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 列表樣式 list-style-type

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-18

    list-style-type是指在CSS中不管是有序列表,還是無序列表,都統(tǒng)一使用list-style-type屬性來定義列表項(xiàng)符號(hào)。

    在HTML中,type屬性定義列表項(xiàng)符號(hào),那是在元素屬性中定義的。但是不建議使用type屬性來定義元素的樣式。

    在CSS中,不管是有序列表,還是無序列表,都統(tǒng)一使用list-style-type屬性定義列表項(xiàng)符號(hào)。

    有序列表list-style-type屬性取值如下:

    ? none:無標(biāo)記

    ? disc:默認(rèn)。標(biāo)記是實(shí)心圓。

    ? circle:標(biāo)記是空心圓。

    ? square:標(biāo)記是實(shí)心方塊。

    ? decimal:標(biāo)記是數(shù)字。

    ? decimal-leading-zero: 0開頭的數(shù)字標(biāo)記(01、02、03等)。

    ? lower-roman:小寫羅馬數(shù)字(i、ii、iii、iv、v等)。

    ? upper-roman:大寫羅馬數(shù)字(I、II、III、IV、V等)。

    ? lower-alpha:小寫英文字母The marker is lower-alpha ( a、b、c、d、e等)。

    ? upper-alpha:大寫英文字母The marker is upper-alpha( A、B、C、D、E等)。

    ? lower-greek:小寫希臘字母(alpha、beta、gamma等)。

    ? lower-latin:小寫拉丁字母(a、b、c、d、e等)。

    ? upper-latin:大寫拉丁字母(A、B、C、D、E等)。

    ? hebrew: 傳統(tǒng)的希伯來編號(hào)方式。

    ? armenian:傳統(tǒng)的亞美尼亞編號(hào)方式。

    ? georgian: 傳統(tǒng)的喬治亞編號(hào)方式(an、ban、gan等)。

    ? cjk-ideographic:簡(jiǎn)單的表意數(shù)字。

    ?hiragana:標(biāo)記是a、i、u、e、o、ka、ki等(日文片假名)。

    ?katakana: 標(biāo)記是A、I、U、E、0、KA、KI等(日文片假名)。

    ?hiragana-iroha: 標(biāo)記是i、ro、ha、ni、ho、he、to等(日文片假名)。

    ?katakana-iroha: 標(biāo)記是I、RO、HA、NI、HO、HE、TO等(日文片假名)。

    【例題】使用list-style-type屬性

    代碼如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.ul{

list-style-type: decimal-leading-zero;

}

.o1{

list-style-type: lower-roman;

}

.u2{

list-style-type: uppear-alpha;

}

.o2{

list-style-type: hebrew;

}

</style>

</head>

<body>

<p>0開頭的數(shù)字標(biāo)記</p>

<ul>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ul>

<hr/>

<p>小寫羅馬數(shù)字</p>

<ol>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ol>

<hr/>

<p>大寫英文字母</p>

<ul>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ul>

<p>傳統(tǒng)的希伯來編號(hào)方式</p>

<ol>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ol>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部