学习笔记 第八章 使用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支持。具体说明如下：

<ol>标签属性

属性	取值	说明
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>标签包含的属性有：

<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>包含的属性有：

<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为列表结构定义了几个专门属性：

CSS专用列表属性

属性	说明
list-style	符合属性。设置列表项目相关内容
list-style-image	设置列表项目的符号图像
list-style-position	设置列表符号的显示位置，根据文本在内或在外排列，取值包括outside | inside
list-style-type	设置列表项目符号的类型

8.3.1 设计项目符号类型

CSS使用list-style-type属性定义列表项目符号的类型，属性取值说明如下：

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 使用背景图设计项目符号

使用背景图像定义项目符号需要掌握两个设计技巧：

1. 隐藏列表结构的默认项目符号，方法是设置list-style-type:none。
2. 为列表定义背景图像，指定要显示的项目符号，利用背景图精确定位技术控制其显示位置；同时增加列表项左侧空白，避免背景图被列表文本遮盖。