<tt id="q85uj"><address id="q85uj"></address></tt>

  1. <tt id="q85uj"><span id="q85uj"></span></tt>
    <i id="q85uj"><address id="q85uj"></address></i>

    <u id="q85uj"></u>

  2. <b id="q85uj"><address id="q85uj"></address></b>
    <ruby id="q85uj"></ruby><acronym id="q85uj"></acronym>
      <tt id="q85uj"><address id="q85uj"></address></tt>
      Menu

      為HTML列表添加創造性的10個CSS片段

      <返回列表

      HTML列表是網頁設計這個被拋棄的世界中真正的幸存者之一。趨勢來來去去,但都是有序的<ol>無序<ul>列表仍然和以往一樣有用。

      與大多數基本的HTML元素一樣,當在站點的內容中使用時(與之相反),這些舊的計時器很無聊。通航,在造型設計方面付出了更多的努力)。即使應用了一些基本的CSS,它們也不能真正加快脈搏。但是我們還有很多潛力去做更多的事情(而且我們有證據)。

      我們成立了一個搜索小組來搜索網頁,尋找有創意的HTML列表的跡象。事實證明,一些才華橫溢的設計師確實超越了簡單的子彈和數字。瞧一瞧!

      顏色和尺寸

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

      移動解決方案

      我們越多地看到人們茫然地盯著他們的手機,無休止地滾動到深淵中,就越容易證明建立長頁是正當的。但每一點滾動需要時間。這就是這個實驗變得有趣的地方。在大屏幕上顯示為多列無序列表的內容在移動設備上變成了一個簡單的逗號分隔段落。這節省了用戶可以更好地花在其他地方的時間和精力(比如瀏覽他們的Facebook提要)。

      保持簡單

      您不需要瘋狂地使用樣式來改進列表的默認外觀。拿著這個自定義號碼的集合。他們使用基本的形狀,顏色和大小來提高整體可讀性。這是一個扣式的公司或非營利網站的完美靈感。

      另一方面,…

      想想這個動畫三維空間列表與上面的正好相反。這是一個吸引注意力的人(在一個好的方面)。它將SVG和JavaScript結合在一起,使這組短小的要點變得與眾不同。這可能是對在線演示文稿或登陸頁面的極大贊揚。

      一個簡單的時間線

      當涉及到創建一個設計特性時,很容易過度考慮這個過程。例如,時間線不需要任何花哨的腳本--一個基本的腳本可以用一個簡單的無序列表來創建。使用CSS偽元素添加一條連接線將整個事情聯系在一起。

      嵌套數

      有時,有序列表需要包含多個嵌套級別,同時遵循一致的數字模式。謝天謝地,CSScounter-reset是為了讓自動編號變得輕而易舉。在這個例子中,列表有四個層次,而編號也是這樣。

      更時髦的鳥巢

      這里還有一個小小的增強,可以使嵌套列表更容易被用戶消化。不僅是數字給出一個圓形的背景,背景顏色變化的基礎上的水平。除了縮進之外,這使得區分嵌套級別變得更加容易--而且通過CSS也非常容易做到。

      網格的優良性

      CSS網格正在改變我們構建布局和列表的方式。此示例演示了創建具有完全響應性的列表的能力。在大型視圖中,它們分成多個列,而在較小的屏幕上折疊成一個列。這是一個很好的教訓,利用任何屏幕房地產是可用的。

      獎金:所有名單

      CSS有許多內置的列表樣式選項--比你想象的要多。這支筆提供了一個方便的不同風格,以及使用圖像和字體圖標替代傳統的要點的例子。

      頂級列表

      HTML列表是最靈活和必不可少的設計元素之一。當你深入觀察時,想到我們使用它們的程度,這是相當令人驚訝的。

      當涉及到添加列表到我們的內容,嗯,他們往往留下了很多有待改進。然而,上面的例子證明了我們不必滿足于默認條件。只要一點CSS(甚至一點JavaScript)就可以大大提高列表內容的趣味性和易讀性。


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      夫妻性生生活视频 - 视频 - 在线观看 - 电影影院 - 品赏网