【收藏】這么多WEB組件(CSS)，攢一個(gè)網(wǎng)站夠了吧？

1 表單(form)相關(guān)

1.1 輸入框(input)

一個(gè)簡單的輸入框樣式，簡捷又不夸張。需要約30行的CSS代碼。

演示程序

1.2 單選多選框(checkbox,radio)

瀏覽器內(nèi)置的checkbox及radio樣式效果太差，本例展示了一個(gè)簡單大方的單選多選框樣式。需要約25行的CSS代碼，額外需要搭配三個(gè)png小圖標(biāo)。

演示程序

1.3 選擇框(select)

一個(gè)簡單的選擇框樣式。需要約50行CSS代碼。

演示程序

1.4 文件選擇框(file)

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

演示程序

2 非表單相關(guān)

2.1 按鈕1(button)

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

演示程序

2.2 按鈕2(button)

一個(gè)帶3D效果的按鈕樣式。需要約60行的CSS代碼。

演示程序

2.3 模態(tài)框(Modal)

一個(gè)簡單的模態(tài)框樣式。純CSS實(shí)現(xiàn)，需要約90行的CSS代碼。

演示程序

2.4 導(dǎo)航條1(navbar)

一個(gè)簡單的帶二級(jí)導(dǎo)航的導(dǎo)航條。需要約50行的CSS代碼。

演示程序

2.5 導(dǎo)航條2(navbar)

一個(gè)帶尖角樣式的導(dǎo)航條。需要約50行的CSS代碼。

演示程序

2.6 面包屑(breadcrumb)

一個(gè)簡單的面包屑樣式。需要約70行的CSS代碼。

演示程序

2.7 塊引用(blockquote)

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

演示程序

2.8 滑動(dòng)門(slider)

一個(gè)簡單的滑動(dòng)門組件。需要約50行的CSS代碼，另需約40行的JQuery代碼。

演示程序

2.9 選項(xiàng)卡(tab)

一個(gè)簡單的選項(xiàng)卡樣式。需要約60行CSS代碼。

演示程序

2.10 分頁(Pagination)

一個(gè)常規(guī)的分頁樣式。需要約50行CSS代碼。

演示程序

2.11 響應(yīng)式表格(table)

一般網(wǎng)站上表格顯示的效果都不理想，本例中提供了一個(gè)簡單的響應(yīng)式表格樣式。需要約80行CSS代碼。

演示程序

3 說明

文中所述文字及代碼部分匯編于網(wǎng)絡(luò)（codepen，cssTricks等）。因時(shí)間不足，能力有限等原因，存在文字闡述不準(zhǔn)及代碼測試不足等諸多問題。因此只限于學(xué)習(xí)范圍，不適用于實(shí)際應(yīng)用。

另外各個(gè)組件之件沒有聯(lián)系，包括字體及配色甚至布局都是相互獨(dú)立的。