學習筆記 第八章 使用CSS美化列表
第8章 使用CSS美化列表
8.1 列表的基本結構
在HTML中，列表結構可以分為兩種基本類型：有序列表和無序列表。使用標簽如下：
- <ul>...</ul>：標識無序列表；
- <ol>...</ol>：標識有序列表；
- <li>...<li>：標識列表項目。
另外，還可以使用定義列表。定義列表包括詞條和解釋兩塊內容。包含的標簽說明如下：
- <dl>...</dl>：標識定義列表；
- <dt>...</dt>：標識詞條；
- <dd>...</dd>：標識解釋。
8.2 創建列表
8.2.1 無序列表
8.2.2 有序列表
<ol>標簽包含3個比較實用的屬性，這些屬性同時獲得HTML5支持。具體說明如下：
| 屬性 | 取值 | 說明 |
|---|---|---|
| reversed | reversed | 定義列表順序為降序 |
| start | number | 定義有序列表的起始值 |
| type | 1、A、a、I、i | 定義在列表中實用的標記類型 |
8.2.3 定義列表
定義列表以<dl>標簽形式出現，在<dl>標簽中包含了<dt>和<dd>標簽，一個<dt>標簽對應著一個或多個<dd>標簽。
8.2.4 菜單列表
在HTML5中重新定義了<menu>標簽。實用<menu>可以定義命令的列表或菜單。<menu>中可以包含<command>和<menuitem>標簽，用於定義命令和項目。
<command>標簽可以定義命令按鈕，如單選按鈕、復選框或按鈕。只有當command元素位於menu元素內，該元素才可見。
目前，只有IE9（更早或更晚的版本都不支持）和最新版本的Firefox支持<command>標簽。
<command>標簽包含的屬性有：
| 屬性 | 取值 | 說明 |
|---|---|---|
| checked | checked | 定義是否被選中。僅用於radio或CheckBox類型 |
| disabled | disabled | 定義command是否可用 |
| icon | URL | 定義作為command來顯示的圖像的URL |
| label | text | 為command定義可見的label |
| type | checkbox、command、radio | 定義該command的類型，默認為command |
| radiogroup | groupname | 定義command所屬的組名，僅在類型為radio時使用 |
<menu>標簽也包含兩個專用屬性，簡單說明如下：
- label：定義菜單的可見標簽；
- type：定義要顯示哪種菜單類型，取值如下：
- list：默認值，定義列表菜單；
- context：定義上下午菜單，該菜單必須在用戶能夠與命令進行交互前被激活；
- toolbar：定義工具欄菜單，活動式命令，允許用戶立即與命令進行交互。
8.2.5 彈出菜單
<menuitem>標簽定義用戶可以從彈出菜單調用的命令/菜單項目。
目前，僅有Firefox8.0+版本支持<menuitem>標簽。
<menuitem>包含的屬性有：
| 屬性 | 取值 | 描述 |
|---|---|---|
| checked | checked | 定義在頁面加載後選中命令/菜單項目。僅適用於type="radio"或type="checkbox" |
| default | default | 把命令/菜單項設置為默認命令 |
| disabled | disabled | 定義命令/菜單項應該被禁用 |
| icon | URL | 定義命令/菜單項的圖標 |
| label | text | 必需。定義命令/菜單項的名稱，以向用戶顯示 |
| radiogroup | groupname | 定義命令組的名稱，命令組會在命令/菜單項本身被切換時進行切換。僅適用於type="radio" |
| open | open | 定義details是否可見 |
| type | checkbox、command、radio | 定義命令/菜單項的類型 |
8.2.6 案例：設計圖片旋轉功能
8.2.7 案例：設計分享功能
8.2.8 案例：添加任務列表
8.3 設計CSS樣式
列表默認狀態：左側附加項目符號，列表項目縮進顯示。CSS為列表結構定義了幾個專門屬性：
| 屬性 | 說明 |
|---|---|
| list-style | 符合屬性。設置列表項目相關內容 |
| list-style-image | 設置列表項目的符號圖像 |
| list-style-position |
設置列表符號的顯示位置，根據文本在內或在外排列，取值包括outside | inside |
| list-style-type | 設置列表項目符號的類型 |
8.3.1 設計項目符號類型
CSS使用list-style-type屬性定義列表項目符號的類型，屬性取值說明如下：
| 屬性值 | 說明 | 屬性值 | 說明 |
|---|---|---|---|
| disc | 實心圓，默認值 | upper-roman | 大寫羅馬數字 |
| circle | 空心圓 | lower-alpha | 小寫英文字母 |
| square | 實習方塊 | upper-alpha | 大寫英文字母 |
| decimal | 阿拉伯數字 | none | 不適用項目符號 |
| lower-roman | 小寫羅馬數字 | armenian | 傳統的亞美尼亞數字 |
| cjk-ideographic | 淺白的表意數字 | georigian | 傳統的喬治數字 |
| lower-greek | 基本的希臘小寫字母 | hebrew | 傳統的希伯萊數字 |
| hiragana | 日文平假名字符 | hiragana-iroha | 日文平假名序號 |
| katakana | 日文片假名字符 | katakana-iroha | 日文片假名序號 |
| lower-latin | 小寫拉丁字母 | upper-latin | 大寫拉丁字母 |
CSS使用list-style-position屬性定義項目符號的顯示位置，取值包括outside和inside。outside表示把項目符號顯示在列表項的文本行以外，inside表示把項目符號顯示在文本行以內。
8.3.2 自定義項目符號
使用list-style-image屬性可以自定義項目符號，該屬性允許指定一個外部圖標文件，滿足個性化設計需求，用法如下：
list-style-image: none | <url>
默認值為none。
8.3.3 使用背景圖設計項目符號
使用背景圖像定義項目符號需要掌握兩個設計技巧：
- 隱藏列表結構的默認項目符號，方法是設置list-style-type:none。
- 為列表定義背景圖像，指定要顯示的項目符號，利用背景圖精確定位技術控制其顯示位置；同時增加列表項左側空白，避免背景圖被列表文本遮蓋。
學習筆記 第八章 使用CSS美化列表