CSS筆記（美化列表）
阿新 • • 發佈：2019-01-02
一、列表的基本結構
列表的結構可以分為兩種基本型別：有序列表和無序列表。無序列表使用專案符號來標識列表，而有序列表則使用編號來標識列表的專案順序。
<ul></ul>標識無序列表
<ol></ol>標識有序列表
<li></li>標識列表專案
還有一種特殊列表是定義列表，它包括詞條和解釋兩塊內容
<dl></dl>標識定義列表
<dt></dt>標識詞條
<dd></dd>標識解釋
二、建立列表
1、無序列表
ul與li之間不能插入其他標籤
2、有序列表
<ol>
reversed：取值為本身，定義列表降序
start：取值為數字，定義列表起始值
type：取值1、A、a、I、i，定義列表使用的標記型別
3、定義列表
<dl>標籤包含了<dt>和<dd>標籤，一個<dt>對應一個或多個<dd> 4、選單列表
H5重新定義了H4棄用的
<menu>標籤。<menu>可以包含<command>和<menuitem>
三、設計CSS樣式
列表在預設狀態下效果：左側附加專案符號，列表專案縮排顯示。屬性如下：
list-style：複合屬性。設定列表專案相關內容
list-style-image：設定列表專案的符號影象
list-style-position：設定列表專案符號的顯示位置，根據文字在內或在外排列，取值包括outside|inside
list-style-type：設定列表專案符號的型別
1、專案符號型別
list-style-type屬性值：
| 屬性值 | 說明 | 屬性值 | 說明 |
|---|---|---|---|
| disc | 實心圓，預設值 | upper-roman | 大寫羅馬數字 |
| circle | 空心圓 | lower-alpha | 小寫英文字母 |
| square | 實心方塊 | upper-alpha | 大寫英文字母 |
| decimal | 阿拉伯數字 | none | 不使用專案符號 |
| lower-roman | 小寫羅馬數字 | armenian | 傳統的亞美尼亞數字 |
| cjk-ideographic | 淺白的表意數字 | georgian | 傳統的喬治數字 |
| lower-greek | 基本的希臘小寫字母 | hebrew | 傳統的希伯萊數字 |
| hiragana | 日文平假名字元 | hiragana-iroha | 日文平假名序號 |
| katakana | 日文片假名字元 | katakana-iroha | 日文片假名序號 |
| lower-latin | 小寫拉丁字母 | upper-latin | 大寫拉丁字母 |
2、自定義專案符號
list-style-image:none|<url>