列表出現於 APP 或網頁的比例非常高，這篇就來分享如何建立列表基本 HTML 架構，以「使用元件的概念做設計，以Daily UI 07- Setting為例3/3」的設計畫面進行切版說明。

HTML區塊建立
此畫面可分為上方標題區塊與下方列表區塊，分別以兩個 div 標籤區分區塊，並以 class 名稱 title-wrap 及 content 區分，結構如下：

<div class="title-wrap">
    // 標題處內容
</div>

<div class="content">
    //列表處內容
</div>

標題區塊
此區塊元素有「回前一頁按鈕」及「標題文字」，這邊分別以 button 標籤及 p 標籤建立區塊，並以 class 名稱 back-icon 及 title 區分，結構如下：

<div class="title-wrap">
    // 標題處內容
    <button href="#" class="back-icon"><img src="img/btnBack.png"></button>
    <p class="title">Bluetooth Connect</p>
</div>

列表區塊
此區塊元素就只有「列表」，通常我們會以 ul, li 標籤處理列表，結構如下：

<div class="content">
    <ul>
        <li class="list-item">Amanda Sound System</li>
        <li class="list-item">Rapoo A1018</li>
        <li class="list-item">Amy Bluetooth Keyboard</li>
        <li class="list-item">Candy's Keyboard</li>
    </ul>
</div>

此畫面設計較為單純，所以結構也不複雜，明天將會針對 CSS 的部分做說明，若想參考範例可至我的 Github下載，謝謝！

-Anny