CSS列表測量

一、列表基礎

列表是Web頁面中常見的一種元素，用來呈現數據或者信息。CSS提供了多種樣式處理列表的方式，包括無序列表、有序列表和定義列表。具體樣式控制包括列表標記和列表項的樣式，外邊距和內邊距的設置，以及視覺效果如hover和active狀態的改變。

HTML如下：

  <ul>
    <li>列表項1</li>
    <li>列表項2</li>
    ...
  </ul>

二、列表標記樣式

除了瀏覽器默認的實心圓標記和數字，CSS提供了多種自定義列表標記的方式。可以使用list-style-type屬性來選擇不同的標記類型，也可以通過list-style-image屬性引入自定義的圖像作為標記。

以下是一些可選的樣式：

  ul {
    list-style-type: disc; /* 實心圓 */
  }

  ol {
    list-style-type: lower-roman; /* 小寫羅馬數字 */
  }

  ul.square li {
    list-style-type: square; /* 方塊 */
  }

  ul.circle li {
    list-style-type: circle; /* 空心圓 */
  }

  ul.no-bullet {
    list-style: none; /* 隱藏標記 */
  }

  ul.custom li {
    list-style-image: url('path/to/image.png'); /* 引入自定義圖片 */
  }

三、列表項樣式

除了可以設置列表項的margin和padding，CSS還提供了其他的樣式設置和效果，如字體顏色和粗細、hover和active狀態下的樣式改變。

以下是一些可選的樣式：

  li {
    margin: 5px 0; /* 設置外邊距 */
    padding: 7px; /* 設置內邊距 */
    font-size: 16px; /* 字體大小 */
    color: #666; /* 字體顏色 */
    font-weight: bold; /* 字體粗細 */
  }

  li:hover {
    background-color: #f5f5f5; /* 鼠標懸停背景顏色 */
    cursor: pointer; /* 鼠標樣式 */
  }

  li:active {
    background-color: #ddd; /* 鼠標點擊背景顏色 */
  }

四、列表測量單位

CSS樣式中，可以通過像素（px）、百分比（%）、em和rem等單位來設置列表的大小和間距。

以下是單位的區別和用法：

• 像素（px）是最常見的單位，是絕對單位，表示一個固定的長度。可以用於設置列表項的高度、寬度、外邊距和內邊距等。
• 百分比（%）是相對單位，指相對於其父元素的百分比。一般用於設置列表整體的寬度或高度，也可以用來設置內邊距和外邊距等。
• em是相對單位，指相對於元素自身的字體大小。一般用於設置列表項的字體大小。
• rem是相對單位，指相對於根元素(html)的字體大小。一般用於設置列表項的字體大小。

例如：

  ul {
    width: 80%; /* 相對百分比 */
    font-size: 16px; /* 用於em和rem單位 */
    }

  li {
    height: 50px; /* 固定像素 */
    margin: 0.5em 0; /* 相對em */
    padding: 0.5rem; /* 相對rem */
  }

五、總結

列表是Web頁面中重要的元素之一，CSS提供了多種樣式處理列表的方式，並且支持多種單位來設置樣式和間距。通過這些樣式，可以讓列表在頁面中更加美觀，並增加數據的可讀性和易用性。