HTML列表是web設計中一個真正的幸存者。趨勢來了又去,但都是有序的<ol>無序的<ul>列表仍然像以前一樣有用。
與大多數基本的HTML元素一樣,當在站點內容中使用時,這些舊元素是相當無聊的(與航行,其中更多的精力放在造型上)。即使應用了一點基本的CSS,它們也不能真正加快速度。但還有很多潛力可以做得更多(我們有證據)。
我們成立了一個搜索小組來搜索網頁,尋找有創意的HTML列表的跡象。事實證明,一些有才華的設計師確實超越了簡單的子彈和數字??纯?!
顏色和尺寸
海寧網絡公司對于一張長長的單子來說,一個潛在的問題是很難讓每一項都脫穎而出。這就是這個例子的優點。每個數字以粗體字體和漸變背景突出顯示。此外,每一段內容都使用CSSbox-shadow增加深度。結果是一些吸引人的東西,而且容易閱讀。
移動解決方案
我們越是看到人們茫然地盯著手機,沒完沒了地滾動進入深淵,就越容易為構建長頁面辯護。但每一點滾動需要時間。這就是這個實驗有趣的地方。在大屏幕上顯示為多列無序列表的內容在移動設備上變成了一個簡單的逗號分隔的段落。這節省了用戶的時間和精力,而這些時間和精力可以更好地用于其他地方(比如滾動瀏覽他們的Facebook提要)。
保持簡單
你不需要瘋狂地使用樣式來改進列表的默認外觀。拿這組定制號碼。它們使用基本的形狀、顏色和尺寸來提高整體可讀性。這是一個保守的公司或非盈利網站的完美靈感。
另一方面鈥
想想這個動畫三維列出與上述相反的內容。這是一個引人注目的(在一個很好的方式)。它將SVG和JavaScript結合起來,使這一組簡短的要點變得與眾不同。這可能是對在線演示或登錄頁面的一個很好的贊美。
一個簡單的時間表
當涉及到創建一個設計特性時,很容易過度考慮這個過程。例如,時間軸不需要任何花哨的腳本——一個基本的腳本可以用一個簡單的無序列表來創建。使用CSS偽元素添加一條連接線將整個事情聯系在一起。
嵌套數字
有時,有序列表需要包含多個嵌套級別,同時遵循一致的數字模式。謝天謝地,CSScounter-reset有沒有辦法讓自動編號變得輕而易舉。在本例中,列表深入到四個級別,而編號也隨之進行。
更時尚的巢
下面是另一個小的增強,它可以使嵌套列表更易于用戶理解。不僅數字被賦予一個圓形的背景,背景顏色也會隨著級別的變化而變化。與縮進一起,這使得區分嵌套層變得更加容易,而且通過CSS實現這一點非常容易。
網格的優度
CSS網格正在改變我們構建布局和列表的方式。這個例子演示了創建完全響應的列表的能力。在大的視口中,它們分成多個列,而在較小的屏幕上則收攏為一列。這是一個很好的教訓,如何充分利用屏幕上的不動產。
獎金:所有列表
CSS有很多內置的列表樣式選項,比你想象的要多。這支筆提供了一個方便的不同風格,以及使用圖像和字體可怕的圖標取代傳統的項目符號的例子。
熱門房源
HTML列表是最靈活和不可缺少的設計元素之一。當你更深入地看的時候,想想我們有多大程度地使用它們,這是相當令人驚訝的。
海寧網絡公司當涉及到在我們的內容中添加列表時,嗯,它們通常會留下很多有待改進的地方。然而,上面的例子證明了我們不必為違約而妥協。只需一點點CSS(甚至是少量JavaScript)就可以大大提高列表內容的趣味性和可讀性。