列表元素-ul标签-无序列表的样式定制-前端-HTML5-书闪BookChips

37 - 列表元素 - ul标签 - 无序列表的样式定制

作者：

贺及楼

成为作者

更新日期：2025-02-27 11:53:39

列表元素 - ul标签 - 无序列表的样式定制

在前端开发中，无序列表是一种常见且实用的元素，它可以帮助我们以清晰的方式展示信息。HTML 中的 <ul> 标签用于创建无序列表，默认情况下，列表项会以圆点作为标记。然而，通过 CSS，我们可以对无序列表的样式进行丰富多样的定制，以满足不同的设计需求。本文将详细介绍如何对 <ul> 标签创建的无序列表进行样式定制。

1. 基本的无序列表

首先，让我们来看看基本的无序列表是如何创建的。以下是一个简单的 HTML 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Unordered List</title>
</head>
<body>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
</body>
</html>

在上述代码中，我们使用 <ul> 标签创建了一个无序列表，其中包含三个列表项，每个列表项使用 <li> 标签表示。在浏览器中打开这个 HTML 文件，你会看到列表项前面默认显示为圆点。

2. 更改列表项标记样式

2.1 使用 `list-style-type` 属性

list-style-type 属性可以用来更改列表项标记的样式。以下是一些常见的取值及其效果：

值	描述
`disc`	默认值，实心圆点
`circle`	空心圆圈
`square`	实心方块
`none`	不显示任何标记

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom List Style Type</title>
    <style>
       .disc {
            list-style-type: disc;
        }
       .circle {
            list-style-type: circle;
        }
       .square {
            list-style-type: square;
        }
       .none {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ul class="disc">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
    <ul class="circle">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
    <ul class="square">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
    <ul class="none">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
</body>
</html>

在上述代码中，我们为不同的 <ul> 列表添加了不同的类名，并在 CSS 中使用 list-style-type 属性为每个类名设置了不同的列表项标记样式。

2.2 使用自定义图片作为标记

除了使用预定义的标记样式，我们还可以使用自定义图片作为列表项的标记。可以通过 list-style-image 属性来实现。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom List Style Image</title>
    <style>
        ul {
            list-style-image: url('checkmark.png');
        }
    </style>
</head>
<body>
    <ul>
        <li>Task 1</li>
        <li>Task 2</li>
        <li>Task 3</li>
    </ul>
</body>
</html>

在上述代码中，我们将 list-style-image 属性的值设置为一个图片的 URL，这样列表项的标记就会显示为该图片。需要注意的是，图片的路径要正确，否则标记将无法显示。

3. 调整列表项标记的位置

list-style-position 属性可以用来调整列表项标记的位置，它有两个取值：inside 和 outside。

值	描述
`inside`	标记位于列表项内容内部
`outside`	标记位于列表项内容外部（默认值）

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Style Position</title>
    <style>
       .inside {
            list-style-position: inside;
        }
       .outside {
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <ul class="inside">
        <li>This is a long list item. The marker is inside the content area.</li>
        <li>Another long list item.</li>
    </ul>
    <ul class="outside">
        <li>This is a long list item. The marker is outside the content area.</li>
        <li>Another long list item.</li>
    </ul>
</body>
</html>

在上述代码中，我们为不同的 <ul> 列表添加了不同的类名，并在 CSS 中使用 list-style-position 属性为每个类名设置了不同的列表项标记位置。

4. 综合样式定制

我们可以将上述的样式定制方法综合起来，创建出更具个性化的无序列表。以下是一个综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comprehensive List Style Customization</title>
    <style>
        ul {
            list-style-type: square;
            list-style-position: inside;
            color: #333;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            padding: 20px;
            border: 1px solid #ccc;
        }
        li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1: This is a customized list item.</li>
        <li>Item 2: Another interesting list item.</li>
        <li>Item 3: The last list item in this example.</li>
    </ul>
</body>
</html>

在上述代码中，我们不仅使用 list-style-type 和 list-style-position 属性对列表项标记进行了定制，还对列表的整体样式进行了设置，包括颜色、字体、背景颜色、内边距和边框等，同时为列表项设置了底部外边距，使列表看起来更加美观和易读。

通过以上的介绍，相信你已经掌握了如何对 <ul> 标签创建的无序列表进行样式定制。在实际开发中，你可以根据具体的设计需求，灵活运用这些方法，打造出独具特色的无序列表。