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行。
8.1 带二级菜单导航条
一个简单的带二级菜单的导航条。需要约50行的CSS代码。
8.2 简单导航条
一个带尖角样式的导航条。需要约50行的CSS代码。
9.1 面包屑
一个简单的面包屑样式。需要约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等)。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。
另外各个组件之件没有联系,包括字体及配色甚至布局都是相互独立的。