【收藏】這麼多WEB組件(CSS)，攢一個網站夠了吧？

1 表單(form)相關

1.1 輸入框(input)

一個簡單的輸入框樣式，簡捷又不誇張。須要約30行的CSS代碼。

演示程序

1.2 單選多選框(checkbox,radio)

瀏覽器內置的checkbox及radio樣式效果太差，本例展現了一個簡單大方的單選多選框樣式。須要約25行的CSS代碼，額外須要搭配三個png小圖標。

演示程序

1.3 選擇框(select)

一個簡單的選擇框樣式。須要約50行CSS代碼。

演示程序

1.4 文件選擇框(file)

一個簡單的文件選擇框樣式。須要約20行CSS代碼，另需6行JavaScript代碼。

演示程序

2 非表單相關

2.1 按鈕1(button)

一個平面的的按鈕樣式，配色方案同bootstrap。須要約65行CSS代碼。

演示程序

2.2 按鈕2(button)

一個帶3D效果的按鈕樣式。須要約60行的CSS代碼。

演示程序

2.3 模態框(Modal)

一個簡單的模態框樣式。純CSS實現，須要約90行的CSS代碼。

演示程序

2.4 導航條1(navbar)

一個簡單的帶二級導航的導航條。須要約50行的CSS代碼。

演示程序

2.5 導航條2(navbar)

一個帶尖角樣式的導航條。須要約50行的CSS代碼。

演示程序

2.6 麪包屑(breadcrumb)

一個簡單的麪包屑樣式。須要約70行的CSS代碼。

演示程序

2.7 塊引用(blockquote)

常規的塊引用樣式，文章排版必需的組件。須要約30行的CSS代碼。

演示程序

2.8 滑動門(slider)

一個簡單的滑動門組件。須要約50行的CSS代碼，另需約40行的JQuery代碼。

演示程序

2.9 選項卡(tab)

一個簡單的選項卡樣式。須要約60行CSS代碼。

演示程序

2.10 分頁(Pagination)

一個常規的分頁樣式。須要約50行CSS代碼。

演示程序

2.11 響應式表格(table)

通常網站上表格顯示的效果都不理想，本例中提供了一個簡單的響應式表格樣式。須要約80行CSS代碼。

演示程序

3 說明

文中所述文字及代碼部分彙編於網絡（codepen，cssTricks等）。因時間不足，能力有限等緣由，存在文字闡述不許及代碼測試不足等諸多問題。所以只限於學習範圍，不適用於實際應用。

另外各個組件之件沒有聯繫，包括字體及配色甚至佈局都是相互獨立的。