(1) 列表的三种类型,有序列表ol
为父元素li
为列表项,无序列表ul
为父元素li
为列表项目,描述列表dl
为父元素dt
和dd
分别代表术语和描述。无序列表最为常见,对大多数类型的导航进行标记的事实标准。
(2)有序列表,当列表项的顺序对列表非常关键时使用。对于面包屑导航则应使用有序列表,因为这些链接有特定的次序。有序列表ol
有start
、type
和reversed
的属性。
(3) CSS可以更改有序列表中的项目编号
,无序列表中项目显示的符号,以及列表默认的左边缩进格式,还可设置嵌套列表,html
可通过dir=ltr
属性设置文本从左到右还是从右到左。
(4)设置出现在列表项目左侧的标记类型,样式表中设置list-style-type:marke
其中,marker
的属性值可选为disc
、circle
、square
等值。还可定制列表项的标记符号:
ul {
list-style:none;
margin-left: 0;
padding-left:0;
}
li {
background: url(../img/checkout.png) no-repeat 0 0;
outline: 1px solid blue
}
(5)设置列表的起始编号,设整个列表编号的初始值<ol start='2'>
,修改有序列表中某列表项目的编号<li value='5'>
使用value
属性后,后续的列表也会受到影响。
(6)标记缩排默认情况下列表会位于整个文本块的外面,可通过ul{list-style-position:inside}
属性改变其显示方式为在文本块内。li{line-height}
可增大文本间的间距。
(7)同时设置所有的列表样式类型,ul {list-style:circle inside}
等,指定标记类型、指定标记应悬挂的位置是列表之外还是之内、指定列表项目所用的定制图像标记。
(8)嵌套列表,在一个列表中插入另一个列表。使用嵌套列表创建下拉式导航。通过toplevel 2ndlevel 3rdlevel{style_rules}
根据层级列表设置其对应样式,toplevel
等分别为ol
,ul
,li
等。
(9)描述列表,每个列表都包含在dl
中,其中dt
是名称和术语,dd
是名称术语对应的值。dt
和dd
的数目对应关系不一定,可一对多也可多对一,<dt>Water<dt><dd>Water is the source of life<dd>
。dd+dt{margin-top:1em}
其中+
号的意思是设置紧挨着dd
的dt
,两者之间的上边距为1em
。