欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 新车 > 【前端】如何制作一个自己的网页(17)无序列表

【前端】如何制作一个自己的网页(17)无序列表

2025/2/22 2:03:33 来源:https://blog.csdn.net/fmc121104/article/details/143173635  浏览:    关键词:【前端】如何制作一个自己的网页(17)无序列表

接上文。

二、无序列表(Unordered List)

当内容有先后顺序之分时,我们使用有序列表。

无序列表就是当各个列表项之间不再有顺序级别之分,为并列关系时使用。

例如,新闻栏目各列表项(新闻)之间排序不分先后,就可以看作是一个无序列表;又或者是一个TODO清单,由于对编程充满热情,以至于跳过了早餐。

这样没有顺序的列表就是无序列表。

在HTML中,我们可以使用<ul><li>标签来创建一个无序列表。

无序列表

这几行代码构建了一个无序列表。

第2、6行,使用<ul></ul>标签对定义了一个无序列表。

第3-5行,使用<li></li>标签对为无序列表添加了三个列表项。

<p>今日菜单</p>

<ul>

    <li>锅包肉</li>

    <li>辣子鸡</li>

    <li>啤酒鸭</li>

</ul>

<ul>标签

ul是unordered list的缩写,表示无序列表。

和<ol>标签一样,<ul>标签一般和<li>标签配合使用,不会单独出现,且尽量在<ul>标签中只使用<li>标签。

<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来设置无序列表中的序号样式。

在无序列表中,该属性的常用值和显示效果如图所示。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词