学习笔记 第八章 使用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。
- 为列表定义背景图像，指定要显示的项目符号，利用背景图精确定位技术控制其显示位置；同时增加列表项左侧空白，避免背景图被列表文本遮盖。
