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風格通常用於用戶只能選擇一個選項的情況下，比如問卷調查中的單選題、商品屬性的選擇等。