HTML列表是網頁設計一次性世界中真正的幸存者之一。趨勢來來往往，但有序<ol>和無序<ul>列表仍然有用。

像大多數基本的HTML元素一樣，這些老人在網站內容中使用時看起來很無聊（與導航相反，在樣式中需要花費更多精力）。即使應用了一些基本的CSS，它們也不能真正加快脈沖。但是有很多可能做得更多（我們有證據）。

我們組建了一個搜索網絡，搜索網絡，尋找創意HTML列表的跡象。事實證明，一些才華橫溢的設計師確實超越了簡單的子彈和數字。看一看！

顏色和尺寸

長列表中的一個潛在問題是難以使每個項目脫穎而出。這就是這個例子的美妙之處。每個數字都以粗體字和漸變背景突出顯示。更重要的是，每個內容都使用CSS box-shadow來增加深度。結果是有吸引力且易于閱讀的東西。

移動解決方案

我們越是看到人們茫然地盯著他們的手機，無休止地滾動到深淵，就越容易證明建造長頁面。然而，每一次滾動都需要時間。這就是這個實驗變得有趣的地方。在大屏幕上顯示的多列無序列表在移動設備上變成了一個簡單的逗號分隔段落。這樣可以節省用戶在其他地方更好地花費的時間和精力（比如滾動瀏覽他們的Facebook Feed）。

保持簡單

您不需要狂熱地使用樣式來改進列表的默認外觀。拿這個自定義數字集合。它們使用基本形狀，顏色和尺寸來提高整體可讀性。這是一個扣人心弦的企業或非營利性網站的完美靈感。

另一方面…

把這個動畫3D列表想象成與上面相反的。這個是吸引注意力的（以一種好的方式）。它結合了SVG和JavaScript，使這一小組子彈點不過是普通的。它可能是對在線演示或登錄頁面的極大贊美。

一個簡單的時間表

在創建設計功能時，很容易過度思考這個過程。例如，時間軸不需要任何花哨的腳本 - 只需一個簡單的無序列表即可創建基本腳本。使用CSS偽元素添加連接線將整個事物聯系在一起。

嵌套數字

有時，有序列表需要包含多個嵌套級別，同時遵循一致的數字模式。值得慶幸的是，CSS counter-reset可以輕松實現自動編號。在這個例子中，列表深入四級，編號緊隨其后。

更時尚的巢

這是另一個小的增強功能，可以使嵌套列表更容易被用戶消化。不僅數字被賦予圓形背景，背景顏色基于水平而變化。除了縮進之外，這使得更容易區分嵌套級別 - 并且通過CSS非常容易。

網格的優點

CSS Grid正在改變我們構建布局的方式 - 和列表。此示例演示了創建完全響應的列表的功能。在大型視口中，它們分成多個列，同時在較小的屏幕上向下折疊為單個列。利用任何可用的屏幕空間都是一個很好的教訓。

獎金：所有名單

CSS具有許多內置列表樣式選項 - 超出您的想象。這支筆提供了不同風格的便利綱要，以及使用圖像和Font Awesome圖標代替傳統項目符號的示例。

熱門房源

HTML列表是最靈活和不可或缺的設計元素之一。當你深入研究時，想到我們使用它們的程度是多么令人驚訝。

在向我們的內容添加列表時，它們通常會留下很多不足之處。但是，上面的例子證明我們不必滿足于默認值。只需要一點點CSS（甚至是一些JavaScript）就可以大大提高列表內容的趣味性和易讀性。