html好看css列表样式_CSS样式HTML列表样式

html好看css列表样式

We often see webpages with navigation menus, providing links to other pages in a dropdown fashion, or as a horizontal menu (See the Studytonight Website Navbar above). These menus are structurally lists but are styled to look differently.

我们经常看到带有导航菜单的网页，这些网页以下拉方式或作为水平菜单提供到其他页面的链接(请参见上方的Studytonight网站导航栏)。 这些菜单在结构上是列表，但样式不同。

Lists are also used to represent related data information, which again can be styled to look better.

列表也用于表示相关的数据信息，可以再次设置样式以使其看起来更好。

In HTML, there are two types of lists:

在HTML中，有两种类型的列表：

1. Ordered Lists <ol>: Items marked with numbers or letters.

   有序列表<ol> ：用数字或字母标记的项目。

2. Unordered Lists <ul>: Items marked with bullets.

   无序列表<ul> ：标有项目符号的项目。

With CSS, you can use your own images as bullets in a list. The CSS list properties allows you to:

使用CSS，您可以将自己的图像用作列表中的项目符号 。 CSS列表属性使您可以：

• Set different list item markers for ordered lists.

  为有序列表设置不同的列表项标记。

• Set different list item markers for unordered lists.

  为无序列表设置不同的列表项标记。

• Set an image as the list item marker.

  将图像设置为列表项标记。

The type of list item marker can be set by using the list-style-type property.

可以使用list-style-type属性设置列表项标记list-style-type 。

Example:

例：

ul { 
    list-style-type: circle; 
}

ol { 
    list-style-type: lower-roman; 
}

Live Example →

现场示例→

The following keywords work with the list-style-type property:

以下关键字与list-style-type属性一起使用：

• disc

  碟片

• circle

  圈

• square

  广场

• decimal

  小数

• decimal-leading-zero

  十进制前导零

• lower-roman

  下罗马

• upper-roman

  上罗马

• lower-greek

  下希腊语

• lower-latin

  下拉丁

• upper-latin

  上拉丁

• armenian

  亚美尼亚人

• georgian

  乔治亚风格

• lower-alpha

  下阿尔法

• upper-alpha

  高位字母

• none - removes the bullets

  无 -删除项目符号

NOTE: Non-keyword values have been included in CSS3, but there is hardly any support for them.注意： CSS3中已包含非关键字值，但是几乎没有对它们的支持。

The list-style-type property applies to all lists, and to any element that is set to display: list-item. The color of the list marker will be whatever the color of the element is (set via the color property).

list-style-type属性适用于所有列表以及设置为显示的任何元素： list-item 。 列表标记的颜色可以是元素的颜色(通过color属性设置)。

定位列表项标记 (Positioning the List Item Markers)

Next, you need to know how you can position your list. The list-style-position property lets you set the position of your list on your webpage. It accepts two values, inside & outside. The default value is outside.

接下来，您需要知道如何定位列表。 通过list-style-position属性，您可以设置列表在网页上的位置。 它接受两个值， inside和outside 。 默认值为outside。

Example:

例：

ul{ 
    list-style-position:inside; 
}

Live Example →

现场示例→

图像作为列表项标记 (Image as the List Item Marker)

As we mentioned earlier, it is possible to use an image as a bullet marker on your webpage. This can be done by using the list-style-image property. You can either set it to none, or you can provide a url to some image.

如前所述，可以将图像用作网页上的项目符号。 这可以通过使用list-style-image属性来完成。 您可以将其设置为none ，也可以提供某些图像的网址 。

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

Live Example →

现场示例→

将列表样式化到导航栏中 (Styling List into Navigation Bar)

We can style list to look more than just a simple list. For example: The navigation bar that you see on the top of the current webpage is a styled list.

我们可以对列表进行样式设置，而不仅仅是简单的列表。 例如：您在当前网页顶部看到的导航栏是样式列表。

• Option 1

  选项1

• Option 2

  选项2

• Option 3

  选项3

• Option 4

  选项4

• Option 5

  选项5

We will learn how to style list into different types of Navigation bars, once we are done with other basic styling properties.

一旦完成其他基本样式属性，我们将学习如何将列表样式化为不同类型的导航栏 。

翻译自: https://www.studytonight.com/cascading-style-sheet/styling-lists

html好看css列表样式