html5&css&js代码 038 列表

作者：我家自动化 | 2024-03-23 13:00:56

踩

一、代码
二、解释

这个示例网页展示了如何在HTML中创建和使用不同类型的列表元素，并用中文展示了列表的内容。

一、代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <title>HTML 列表元素示例 - 暗色主题版</title>
   <style>
      /* 设置页面背景为深色调 */
      body {
         background-color: #2e3440;
         color: #d8dee9; /* 文本颜色为浅色调，以确保对比度 */
         font-family: Arial, sans-serif;
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
         margin: 0;
      }

      h1, h2 {
         color: #b48ead; /* 标题采用较亮的暗紫色 */
      }

      ul, ol, dl {
         list-style-position: inside; /* 将列表标记放置在文本内部，以便于居中对齐 */
         padding: 0;
         margin: 1em 0;
      }

      li, dt, dd {
         margin-bottom: 0.5em;
      }

      /* 无序和有序列表的定制样式 */
      ul, ol {
         background-color: #3b4252;
         border-radius: 5px;
         padding: 10px;
      }
      /* 定义列表的定制样式 */
      dl {
         background-color: #3b4252;
         border-radius: 5px;
         padding: 10px;
      }
      dt {
         font-weight: bold;
         margin-top: 10px;
      }
      dd {
         margin-left: 10px;
      }
   </style>
</head>
<body>
<div style="width: 80%; max-width: 800px;">
   <h1>HTML 列表元素示例</h1>
   <!-- 无序列表 -->
   <h2>无序列表</h2>
   <ul>
      <li>列表项一</li>
      <li>列表项二</li>
      <li>列表项三
         <ul>
            <li>子列表项一</li>
            <li>子列表项二</li>
            <li>子列表项三</li>
         </ul>
      </li>
      <li>列表项四</li>
   </ul>
   <!-- 有序列表 -->
   <h2>有序列表</h2>
   <ol>
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项
         <ol type="A">
            <li>子列表项A</li>
            <li>子列表项B</li>
         </ol>
      </li>
      <li>第四项</li>
   </ol>
   <!-- 定义列表 -->
   <h2>定义列表</h2>
   <dl>
      <dt>术语一</dt>
      <dd>术语一的描述内容。</dd>
      <dt>术语二</dt>
      <dd>术语二的描述内容。</dd>
   </dl>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

二、解释

当然可以，下面是一个使用中文展示不同类型HTML列表元素的网页示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML 列表元素示例</title>
</head>
<body>
    <h1>HTML 列表元素示例</h1>
    <!-- 无序列表（无顺序的列表） -->
    <h2>无序列表</h2>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三
            <ul>
                <li>子列表项一</li>
                <li>子列表项二</li>
                <li>子列表项三</li>
            </ul>
        </li>
        <li>列表项四</li>
    </ul>

    <!-- 有序列表（有顺序的列表） -->
    <h2>有序列表</h2>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项
            <ol type="A">
                <li>子列表项A</li>
                <li>子列表项B</li>
            </ol>
        </li>
        <li>第四项</li>
    </ol>

    <!-- 定义列表（术语和描述的列表） -->
    <h2>定义列表</h2>
    <dl>
        <dt>术语一</dt>
        <dd>术语一的描述内容。</dd>
        <dt>术语二</dt>
        <dd>术语二的描述内容。</dd>
    </dl>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

在这个示例中，我们创建了三个部分，每个部分都有一个标题和相应的列表类型：

无序列表：使用<ul>标签创建，列表项使用<li>标签。无序列表通常用于展示没有顺序关系的项目。在这个例子中，我们还展示了如何创建嵌套的无序列表。
有序列表：使用<ol>标签创建，列表项同样使用<li>标签。有序列表用于展示有顺序关系的项目。在这个例子中，我们使用了默认的数字编号，并通过type="A"属性为嵌套的有序列表设置了大写字母编号。
定义列表：使用<dl>标签创建，定义术语使用<dt>标签，术语描述使用<dd>标签。定义列表用于展示术语和描述的对应关系。
你可以将这段代码保存为.html文件，并在浏览器中打开来查看效果。这个示例网页展示了如何在HTML中创建和使用不同类型的列表元素，并用中文展示了列表的内容。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/295291