总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?
一个简单的输入框样式,简捷又不夸张。需要约30行的CSS代码。
浏览器内置的checkbox及radio样式效果太差,本例展示了一个简单大方的单选多选框样式。需要约25行的CSS代码,额外需要搭配三个png小图标。
一个简单的选择框样式。需要约50行CSS代码。
一个简单的文件选择框样式。需要约20行CSS代码,另需6行JavaScript代码。
一个平面的的按钮样式,配色方案同bootstrap。需要约65行CSS代码。
一个带3D效果的按钮样式。需要约60行的CSS代码。
一个简单的模态框样式。纯CSS实现,需要约90行的CSS代码。
一个简单的带二级导航的导航条。需要约50行的CSS代码。
一个带尖角样式的导航条。需要约50行的CSS代码。
一个简单的面包屑样式。需要约70行的CSS代码。
常规的块引用样式,文章排版必需的组件。需要约30行的CSS代码。
一个简单的滑动门组件。需要约50行的CSS代码,另需约40行的JQuery代码。
一个简单的选项卡样式。需要约60行CSS代码。
一个常规的分页样式。需要约50行CSS代码。
一般网站上表格显示的效果都不理想,本例中提供了一个简单的响应式表格样式。需要约80行CSS代码。
文中所述文字及代码部分汇编于网络(codepen,cssTricks等)。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。
另外各个组件之件没有联系,包括字体及配色甚至布局都是相互独立的。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。