一、单层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风格通常用于用户只能选择一个选项的情况下，比如问卷调查中的单选题、商品属性的选择等。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/235605.html
微信扫一扫 
支付宝扫一扫 