廣告素材清單樣式

瞭解一些實用且有創意的清單樣式。

Michelle Barker
Michelle Barker

一提到清單,你會想到什麼?最明顯的例子就是購物清單,這是最簡單的清單,不按特定順序收集項目。不過,我們在網路上會以各種方式使用清單。某場地點即將舉辦的演唱會集合?很可能是清單。預訂流程是否包含多個步驟?很可能是清單。圖片庫?這也算是附帶說明文字的圖片清單。

本文將深入探討網路上可用的不同 HTML 清單類型,以及使用這些類型的時機,包括您可能不熟悉的某些屬性。我們也會介紹一些實用且有創意的方式,讓您使用 CSS 為圖片設定樣式。

當項目需要以語意方式分組時,應使用 HTML 清單元素。輔助技術 (例如螢幕閱讀器) 會通知使用者有清單,以及項目數量。舉例來說,如果是購物網站上的產品格線,瞭解這項資訊就非常有幫助。因此,使用清單元素可能會是個不錯的選擇。

列出類型

在標記方面,我們可以選擇三種不同的清單元素:

  • 未排序的清單
  • 已排序的清單
  • 說明清單

您可以根據用途選擇要使用的版本。

未排序清單 (ul)

當清單中的項目不按任何特定順序排列時,無序清單元素 (<ul>) 最實用。根據預設,這會以項目符號清單的形式顯示。例如購物清單,其中的項目順序不拘。

購物清單,列出麵包、牛奶、蘋果等項目。

網頁上更常見的例子是導覽選單。建立選單時,建議將 ul 包裝在 nav 元素中,並使用標籤標示選單,以利輔助技術。我們也應在選單中識別目前的頁面,可使用 aria-current 屬性:

<nav aria-label="Main">  
 
<ul>  
   
<li>  
     
<a href="/page-1" aria-current="page">Menu item 1</a>  
   
</li>  
   
<li>  
     
<a href="/page-2">Menu item 2</a>  
   
</li>  
   
<li>  
     
<a href="/page-2">Menu item 2</a>  
   
</li>  
      …  
   
</ul>  
</nav>  

這篇文章將說明一些建議,確保所有使用者都能存取導覽選單。

已排序的清單 (ol)

如果項目的順序很重要,例如多步驟程序,有序清單元素 (<ol>) 就是最佳選擇。根據預設,清單項目會加上編號。舉例來說,您可以提供一組操作說明,要求使用者依序完成步驟。

列出製作奶茶所需的詳細步驟。

<ol><ul> 元素都只能包含 <li> 元素做為直接子項。

說明清單 (dl)

說明清單包含術語 (<dt> 元素) 和說明 (<dd>),每個術語可搭配多個說明。可能的用途包括術語字典,或是餐廳菜單。根據預設,說明清單不會顯示任何標記,但瀏覽器通常會縮排 <dd> 元素。

在 HTML 中,您可以使用 <div> 將術語與其說明分組。這在設定樣式時非常實用,我們稍後會說明。

<!-- This is valid --> 
<dl>  
   
<dt>Term 1</dt>  
   
<dd>This is the first description of the first term in the list</dd>  
   
<dd>This is the second description of the first term in the list</dd>  
   
<dt>Term 2</dt>  
   
<dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid -->
<dl>  
   
<div>  
       
<dt>Term 1</dt>  
       
<dd>This is the first description of the first term in the list</dd>  
       
<dd>This is the second description of the first term in the list</dd>  
   
</div>  
   
<div>  
       
<dt>Term 2</dt>  
       
<dd>This is the description of the second term in the list</dd>  
   
</div>  
</dl>  

簡單清單樣式

清單最簡單的用途之一,就是在內文區塊中使用。這類簡單清單通常不需要繁複的樣式,但我們可能會在某種程度上自訂排序或未排序清單的標記,例如使用品牌顏色,或使用自訂圖片做為項目符號。我們可以使用 list-style::marker 擬物元素做很多事情!

::marker

除了為清單標記提供一些基本樣式,我們還可以建立循環圖示。我們會使用三個不同的圖片網址,做為 ::marker 擬物元素的 content 值,藉此增添購物清單範例的手寫風格 (而不是只使用單一圖片):

::marker {  
   
content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
   
content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
   
content: url("/marker-3.svg") ' ';  
}  

自訂計數器

對於某些有順序的清單,我們可能會使用計數器值,但會在其後附加其他值。我們可以使用 list-item 計數器做為標記的 content 屬性值,並附加任何其他內容:

::marker {  
   
content: counter(list-item) '🐈 ';  
}  

計數器會自動遞增 1,但我們可以選擇在清單項目上設定 counter-increment 屬性,讓計數器遞增不同的值。舉例來說,這會讓計數器每次遞增 3:

li {  
   
counter-increment: list-item 3;  
}  

我們可以深入探討更多有關計數器的內容。本文「CSS 清單、標記和計數器」將詳細說明其中一些可能性。

::marker 樣式的限制

有時我們可能需要進一步控管標記的位置和樣式。舉例來說,您無法使用彈性容器或格線來定位標記,這在需要其他對齊方式時,可能會造成不便。::marker 會公開數量有限的 CSS 屬性,用於設定樣式。如果設計需要的基本樣式以外的其他元素,建議使用其他擬似元素。

為不像清單的清單設定樣式

有時,我們可能會希望以與預設樣式完全不同的方式為清單設定樣式。導覽選單通常就是這種情況,因為我們通常會移除所有標記,並使用彈性容器將清單水平顯示。常見做法是將 list-style 屬性設為 none。這表示標記符號偽元素將無法再在 DOM 中存取。

使用 ::before 的自訂標記

::marker 推出之前,為 ::before 擬元素設定樣式,是建立自訂清單標記的常見方式。不過,即使現在,我們仍可在需要時,為視覺上複雜的清單樣式提供更多彈性。

就像 ::marker 一樣,我們可以使用 content 屬性新增自訂項目符號樣式。與使用 ::marker 不同的是,我們需要手動調整位置,因為我們無法獲得 list-style-position 提供的自動優勢。不過,我們可以使用彈性容器輕鬆調整位置,彈性容器也提供更多對齊選項。舉例來說,我們可以交替標記的位置:

如果我們使用 ::before 元素為排序清單設定樣式,可能也會想使用計數器來新增數字標記。

li::before {  
 
counter-increment: list-item;  
 
content: counter(list-item);  
}  

使用 ::before 而非 ::marker 時,您可以完全存取 CSS 屬性,以便自訂樣式,並允許動畫和轉場效果 (::marker 僅提供有限支援)。

列出屬性

有序清單元素可接受一些選用屬性,可用於各種用途。

反向清單

如果我們有過去一年的 10 大專輯清單,可能會想從 10 到 1 倒數。我們可以使用自訂計數器,並以負值遞增計數器。或者,我們也可以直接在 HTML 中使用 reversed 屬性。我認為,除非計數器純粹是呈現用途,否則一般來說,在 CSS 中使用 reversed 屬性,而非以負值方式遞增計數器,會比較符合語意。如果 CSS 無法載入,您仍會在 HTML 中看到正確倒數的數字。此外,我們也需要考量螢幕閱讀器如何解讀清單。

這裡有 2021 年熱門專輯的前 10 名示範。如果計數器是純粹透過 CSS 遞增,使用螢幕閱讀器存取網頁的使用者可能會認為數字是遞增的,因此 10 其實是 1。

您可以在示範中看到,只要使用 reversed 屬性,標記就會自動取得正確的值,而我們不必額外採取任何行動!不過,如果我們使用 ::before 擬似元素建立自訂清單標記,就需要調整計數器。我們只需要指示清單項目計數器以負值遞增:

li::before {  
 
counter-increment: list-item -1;  
 
content: counter(list-item);  
}  

這在 Firefox 中就足夠了,但在 Chrome 和 Safari 中,標記會從 0 倒數到 -10。我們可以將 start 屬性新增至清單來修正這個問題。

分割清單

start 屬性可讓我們指定清單應從哪個數值開始。這項功能可用於將清單分組。

讓我們以前述的 10 大專輯範例為基礎,我們可能想計算前 20 張專輯,但以 10 張為一組。這兩個群組之間有其他網頁內容。

以欄列為單位的線框清單,其中有一個元素橫跨欄列中間。

我們需要在 HTML 中建立兩個獨立的清單,但如何確保計數器正確無誤?根據目前的標記,兩個清單都會從 10 倒數到 1,這不是我們想要的結果。不過,我們可以在 HTML 中指定 start 屬性值。如果我們在第一個清單中新增 start 值 20,標記會再次自動更新!

<ol reversed start="20">  
 
<li>...</li>  
 
<li>...</li>  
 
<li>...</li>  
</ol>  

多欄清單版面配置

如您在先前的示範中所見,多欄版面配置有時很適合用於清單。設定資料欄寬度後,我們就能確保清單會自動調整為響應式,並在有足夠空間時,將清單放在兩個或更多資料欄上。我們也可以設定欄間間距,並為進一步增添裝飾效果,新增樣式化的 column-rule (使用與 border 屬性相似的簡寫):

ol {  
   
columns: 25rem;  
   
column-gap: 7rem;  
   
column-rule: 4px dotted turquoise;  
}  

使用欄時,有時會導致清單項目出現不美觀的斷行,這並非我們想要的效果。

示範如何將內容分割成兩個欄位。

我們可以使用 break-inside: avoid 避免清單項目出現強制換行:

li {  
   
break-inside: avoid;  
}  

自訂屬性

CSS 自訂屬性可讓您為清單設定樣式,並提供多種可能性。如果我們知道清單項目的索引,就可以使用該索引來計算屬性值。很抱歉,目前無法透過 CSS 判斷元素的索引 (至少以可用的方式)。計數器只允許我們在 content 屬性中使用其值,不允許計算。

不過,我們可以在 HTML 的 style 屬性中設定元素索引,這樣計算的可能性就會提高,尤其是在使用模板語言時。以下範例說明如何使用 Nunjucks 設定:

<ol style="--length: items|length">  
 
</ol>  

Splitting.js 是用於用戶端執行類似功能的程式庫。

我們可以使用自訂屬性值,以各種方式透過清單顯示進度。其中一種方法是使用步驟清單的進度列。在這個範例中,我們使用含有線性漸層的虛擬元素,為每個項目建立長條,顯示使用者在清單中的位置。

li::before {  
   
--stop: calc(100% / var(--length) * var(--i));  
   
--color1: deeppink;  
   
--color2: pink;  

   
content: '';  
   
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}  

我們也可以使用 hsl() 顏色函式,在清單進度變化時調整色調。我們可以使用自訂屬性來計算 hue 值。

說明清單樣式

如先前所述,我們可以選擇在 dldiv 中包裝術語和其定義,以便提供更多樣式選項。舉例來說,我們可能會想以格狀方式顯示清單。如果在清單上設定 display: grid,但沒有在每個群組周圍加上包裝函式 div,就表示我們的條件和說明會放置在不同的格線儲存格中。有時候這很實用,例如在下列範例中,顯示包含說明的派圖示選單。

我們可以在清單中定義格線,確保條件和說明一律會在欄中對齊,且欄寬由最長的條件決定。

另一方面,如果我們想以卡片樣式將詞彙與說明分組,則包裝函式 <div> 就非常實用。

資源