List风格演示

一、单层List风格

单层List风格是指列表中只有一级内容，通常采用圆点、方块或其他符号作为列表标记，比如以下示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

该示例代码用<ul>标签生成了一个无序列表，其中每一个列表项使用<li>标签表示。这个例子中，列表项使用了默认的圆点标记，如果想要修改标记样式，可以使用CSS来设置。

单层List风格使用简单，通常用于简单的列表展示，如常见的导航列表、商品列表等。

二、多层嵌套List风格

多层嵌套List风格是指列表中含有多级内容，通常采用缩进、不同的符号等方式表示层级结构，比如以下示例：

<ul>
  <li>列表项1</li>
  <li>列表项2
    <ul>
      <li>子列表项1</li>
      <li>子列表项2</li>
    </ul>
  </li>
  <li>列表项3</li>
</ul>

该示例代码使用了多层嵌套的方式来表示层级结构，第二个列表项下嵌套了一个子列表，子列表也使用了<ul>标签。如果要修改子列表项的标记样式，可以给子列表加上类名并设置CSS样式。

多层嵌套List风格常用于具有层级结构的内容展示，比如网站的分类、栏目结构等。

三、复选框List风格

复选框List风格是指列表中的每个列表项都有相应的复选框，用户可以通过勾选复选框进行选择或操作，比如以下示例：

<ul>
  <li><input type="checkbox" name="item1"> 列表项1</li>
  <li><input type="checkbox" name="item2"> 列表项2</li>
  <li><input type="checkbox" name="item3"> 列表项3</li>
</ul>

该示例代码用<input>标签生成了复选框，并将其放在每个列表项的前面。用户可以勾选或取消勾选复选框，完成选择或操作。如果要获取用户勾选了哪些列表项，可以使用JavaScript来获取。

复选框List风格通常用于用户的选择或操作，比如购物车中的商品选择、任务清单的勾选等。

四、单选框List风格

单选框List风格是指列表中的每个列表项都有相应的单选框，用户只能选择其中一个列表项，比如以下示例：

<ul>
  <li><input type="radio" name="item" value="item1"> 列表项1</li>
  <li><input type="radio" name="item" value="item2"> 列表项2</li>
  <li><input type="radio" name="item" value="item3"> 列表项3</li>
</ul>

该示例代码用<input>标签生成了单选框，并将其放在每个列表项的前面。用户只能选择其中一个列表项，选择后其他单选框都将取消选择。如果要获取用户选择的列表项，可以使用JavaScript来获取。

单选框List风格通常用于用户只能选择一个选项的情况下，比如问卷调查中的单选题、商品属性的选择等。