接上文。
二、无序列表(Unordered List)
当内容有先后顺序之分时,我们使用有序列表。
而无序列表就是当各个列表项之间不再有顺序级别之分,为并列关系时使用。
例如,新闻栏目各列表项(新闻)之间排序不分先后,就可以看作是一个无序列表;又或者是一个TODO清单,由于对编程充满热情,以至于跳过了早餐。
这样没有顺序的列表就是无序列表。
在HTML中,我们可以使用<ul>
和<li>
标签来创建一个无序列表。
无序列表
这几行代码构建了一个无序列表。 第2、6行,使用 第3-5行,使用 |
<p>今日菜单</p> <ul> <li>锅包肉</li> <li>辣子鸡</li> <li>啤酒鸭</li> </ul> |
|
<ul>标签
ul是unordered list的缩写,表示无序列表。 和<ol>标签一样, |
<p>今日菜单</p> <ul> <li>锅包肉</li> <li>辣子鸡</li> <li>啤酒鸭</li> </ul> |
|
<li>标签
<ul>中的<li>标签和有序列表中的<li>标签一样,都表示列表项,其中可以包含文本、图片、链接等,甚至还可以是另外一个列表。 默认情况下,无序列表的每个列表项前面都有一个实心黑色圆点。 示例中,我们有3个<li>标签,表示一共定义了3个列表项,分别是锅包肉、辣子鸡和啤酒鸭。 |
<p>今日菜单</p> <ul> <li>锅包肉</li> <li>辣子鸡</li> <li>啤酒鸭</li> </ul> |
|
Ps:
无序列表默认状态的显示效果
1、每一项都是没有顺序的;
2、每一项前面默认有实心的黑色圆点进行标记。
指定序号样式
通过刚刚的练习可以看到,当我们在一个无序列表中嵌套另一个无序列表时,默认两个无序列表的序号样式是不同的。
和有序列表一样,我们可以通过CSS样式属性list-style-type来设置无序列表中的序号样式。
在无序列表中,该属性的常用值和显示效果如图所示。