程序开发中常用CSS组件汇编及示例

2019-4-22 by @毛瑞

1.1 前言

总是喜欢简单又精致的东西,美得不繁复也不张扬。这许这就是闷骚程序员的癖好吧!闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

2.1 简单输入框

一个简单的输入框 input 样式,简捷又不夸张。纯CSS实现,代码约30行。

2.2 文本输入框样式2

一个文本输入框 input 样式。纯CSS实现,代码约80行。

3.1 多选框

内置的多选框 checkbox 样式效果太差,本例展示了一个简单大方的多选框样式。纯CSS实现,代码约19行,但需要搭配两个png小图标。

4.1 单选框

内置的单选框 radio 样式效果太差,本例展示了一个简单大方的单选框样式。纯CSS实现,实现代码约19行,但需要搭配两个png小图标。

5.1 选择框

一个简单的选择框样式。纯CSS实现,代码约50行。

6.1 文件输入框

一个简单的文件选择框样式。需要约20行CSS代码,另需6行JavaScript代码。

7.1 按钮样式1

一个带3D效果的按钮样式。需要约60行的CSS代码。

7.2 按钮样式2

一个平面的的按钮样式,配色方案同bootstrap。需要约65行CSS代码。

7.3 按钮样式3

本例是一个带动画效果的按钮样式。纯CSS实现,代码约60行。

一个简单的带二级菜单的导航条。需要约50行的CSS代码。

一个带尖角样式的导航条。需要约50行的CSS代码。

一个简单的面包屑样式。需要约70行的CSS代码。

10.1 块引用样式1

常规的块引用样式,文章排版必需的组件。需要约30行的CSS代码。

11.1 分页组件

一个常规的分页样式。需要约50行CSS代码。

12.1 滑动门/轮播

一个简单的滑动门组件。需要约50行的CSS代码,另需约40行的JQuery代码。

13.1 响应式表格样式1

多数网站上的表格显示效果都不理想,本例中提供了一个简单的响应式表格样式。需要约80行CSS代码。

13.2 带模糊效果的表格

本例中提供了一个带模糊效果的表格样式。需要约70行CSS代码。

14.1 正在载入动画样式1

本例中提供了一个正在载入动画显示效果。纯CSS实现,代码约60行。

15.1 结语

文中所述文字及代码部分汇编于网络(codepen,cssTricks等)。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。

另外各个组件之件没有联系,包括字体及配色甚至布局都是相互独立的。