h5 实现列表

实现列表的基本方法

在HTML5中，列表可以通过<ul>、<ol>和<dl>标签实现，分别对应无序列表、有序列表和定义列表。

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
</ul>

<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
</ol>

<dl>
  <dt>定义标题</dt>
  <dd>定义描述</dd>
</dl>

自定义列表样式

通过CSS可以修改列表的默认样式，例如去除默认的列表符号或更改编号类型。

ul {
  list-style-type: none; /* 去除默认符号 */
  padding-left: 0;
}

ol {
  list-style-type: upper-roman; /* 大写罗马数字 */
}

嵌套列表的实现

列表可以多层嵌套，适用于复杂的层级结构。

<ul>
  <li>一级列表
    <ul>
      <li>二级列表</li>
    </ul>
  </li>
</ul>

响应式列表布局

结合Flexbox或Grid布局可以实现响应式列表，适应不同屏幕尺寸。

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

动态列表交互

通过JavaScript可以实现动态添加、删除列表项等交互功能。

document.querySelector('button').addEventListener('click', function() {
  const ul = document.querySelector('ul');
  const li = document.createElement('li');
  li.textContent = '新列表项';
  ul.appendChild(li);
});