制作现代网站和应用程序时CSS项目符号样式

在本文中，我们将讨论无序列表，在制作现代网站和应用程序时，无序列表的发展是不可避免的。

你是否做了很多很多名单的粉丝？我也不是。但是，这里我们不是在谈论家务或购物清单。我们正在讨论制作现代网站和应用程序时不可避免的有序和无序列表。

如前所述，在HTML和CSS中创建列表时，有两种类型：有序和无序。在有序列表的情况下，存在数字。另一方面，在无序列表的情况下，不存在计数，这就是为什么这些类型的列表的通用名称是项目符号列表。

使用列表时，正确格式化文本非常重要。

本文的重点将放在无序列表上，以及子弹的类型和属性。

无序列表使用

标签。我们来看一个简单的例子。

HTML

First item

Second item

Third item

类型属性

该类型属性可以被用来确定哪个子弹的类型将在列表中被使用。该属性可以由三个不同的值组成：

Circle

Disc

Square

可以在

or

元素上设置项目符号类型，这意味着您可以在整个列表中设置样式，或者单独设置每个列表项目的样式。

需要知道的是在创建列表时使用哪种字体大小。

Bullet样式

为了改变项目符号样式，可以使用两个属性。该列表样式类型属性或列表样式。不同的是，通过使用第二个，我们可以同时更改多个属性。但我们会在稍后讨论。

CSS

.ul { list-style-type: square; }

这里我们看到列表样式设置为square。

使用自定义图像

借助CSS的强大功能，可以使用自定义图像作为子弹。通常，它是一个简单的小图标。为此，我们使用list-style-image。

CSS

ul { list-style-image: url(‘images/sample-bullet.png’); }

Bullet位置

我们也可以通过使用list-style-position属性来设置项目符号的位置。它可以有两个值：外部和内部。

CSS

ul { list-style-position: outside; }

CSS

ul { list-style-position: inside; }

第一张图片显示的是设置为外部的值，第二张图片的值设置为内部。

将值设置为外部时，表示子弹将位于列表项之外。并且，将值设置为内部时，子弹将位于列表项内。

不要忘记给列表一些样式。

如果这种造型不够，可以改变项目符号的颜色。

合并属性

如前所述，您可以通过设置列表样式来组合多个属性。

CSS

ul { list-style: square inside url("element.gif"); }

通过这个简写，我们同时设置了列表式样式，列表式样位置和列表式样图像。

概要

开发网站和应用程序时经常使用列表，所以您应该始终知道如何设计它们。我希望这个简短的解释能帮助你的项目。