简言
总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?
CSS组件
1 表单(form)相关
1.1 输入框(input)
一个简单的输入框样式,简捷又不夸张。需要约30行的CSS代码。
输入框(input)样式图
1.2 单选多选框(checkbox,radio)
浏览器内置的checkbox及radio样式效果太差,本例展示了一个简单大方的单选多选框样式。需要约25行的CSS代码,额外需要搭配三个png小图标。
单选多选框(checkbox,radio)样式图
1.3 选择框(select)
一个简单的选择框样式。需要约50行CSS代码。
选择框(select)样式图
1.4 文件选择框(file)
一个简单的文件选择框样式。需要约20行CSS代码,另需6行JavaScript代码。
文件选择框(file)样式图
2 非表单相关
2.1 按钮1(button)
一个平面的的按钮样式,配色方案同bootstrap。需要约65行CSS代码。
按钮1(button)样式图
2.2 按钮2(button)
一个带3D效果的按钮样式。需要约60行的CSS代码。
按钮2(button)样式图
2.3 模态框(Modal)
一个简单的模态框样式。纯CSS实现,需要约90行的CSS代码。
模态框(Modal)样式图
2.4 导航条1(navbar)
一个简单的带二级导航的导航条。需要约50行的CSS代码。
导航条1(navbar)样式图
2.5 导航条2(navbar)
一个带尖角样式的导航条。需要约50行的CSS代码。
导航条2(navbar)样式图
2.6 面包屑(breadcrumb)
一个简单的面包屑样式。需要约70行的CSS代码。
面包屑(breadcrumb)样式图
2.7 块引用(blockquote)
常规的块引用样式,文章排版必需的组件。需要约30行的CSS代码。
块引用(blockquote)样式图
2.8 滑动门(slider)
一个简单的滑动门组件。需要约50行的CSS代码,另需约40行的JQuery代码。
滑动门(slider)样式图
2.9 选项卡(tab)
一个简单的选项卡样式。需要约60行CSS代码。
选项卡(tab)样式图
2.10 分页(Pagination)
一个常规的分页样式。需要约50行CSS代码。
分页(Pagination)样式图
2.11 响应式表格(table)
一般网站上表格显示的效果都不理想,本例中提供了一个简单的响应式表格样式。需要约80行CSS代码。
响应式表格(table)样式图
3 说明
文中所述文字及代码部分汇编于网络(codepen,cssTricks等)。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。
另外各个组件之件没有联系,包括字体及配色甚至布局都是相互独立的。
相关推荐
适用博客开发 Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。
CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件
如果定位本机支持ES2015但不支持本机Web组件的浏览器: 您还将需要 。 有关和支持,请访问caniuse.com。 使用Shady DOM polyfill时有关CSS封装的注意事项如果打算使用Shady DOM *.vue ,建议在*.vue文件中使用代替&...
可作为Web组件的纯CSS切换(Toggle)按钮
layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js
内容包含: CSS书写规范 如何写出 高效易懂的CSS代码 CSS效率优化建议; 新手或者追求优化性能的同学 值得一看
css-doodle
web 网页HTML CSS JS 全套中文课程培训网站模板web 网页HTML CSS JS 全套中文课程培训网站模板web 网页HTML CSS JS 全套中文课程培训网站模板web 网页HTML CSS JS 全套中文课程培训网站模板web 网页HTML CSS JS 全套...
基于 React.js 的移动端 Web 组件库,使开发者只需专注js业务逻辑,无需H5,CSS开发
高效-可维护-组件化的CSS 感觉很不错,上传分享
web 网页HTML CSS JS免费自适应商务工业工厂网站模板web 网页HTML CSS JS免费自适应商务工业工厂网站模板web 网页HTML CSS JS免费自适应商务工业工厂网站模板web 网页HTML CSS JS免费自适应商务工业工厂网站模板web ...
一个简单的注入CSS的React组件
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI、iview)。 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素...你可以在一个组件中同时使用有作用域和无作用域的样
表单元件库组件、框架、web前后端Bootstrap、导航栏、边框、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、html、前端代码、js、css 适用范围:PC端,前端页面展示 适用软件: H-builder 、VSCode、...
37 KB未压缩JS (无CSS或可选的polyfill)中的6个Web组件。组件特征 :control_knobs: 6个最少的组成部分 :artist_palette: 使用CSS变量进行主题化 :lipstick: SASS / SCSS :evergreen_tree: 在任何现代浏览器中均可...
HTML为主要结构,所有内容都是定义在html上的,css则负责对网页的修饰和布局,而JavaScript则是是网页拥有一个动态的效果, 何为动态效果?在我们初学html是,所学的form表单中的submit提交组件则是一种类似的动态效果,而...
适合初学的,一个简单的主页面。里面用到了CSS DIV 母板 自定义组件 !
React的一个CSS 媒体查询组件