简言

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

1 表单(form)相关

1.1 输入框(input)

一个简单的输入框样式,简捷又不夸张。需要约30行的CSS代码。

演示程序

1.2 单选多选框(checkbox,radio)

浏览器内置的checkbox及radio样式效果太差,本例展示了一个简单大方的单选多选框样式。需要约25行的CSS代码,额外需要搭配三个png小图标。

演示程序

1.3 选择框(select)

一个简单的选择框样式。需要约50行CSS代码。

演示程序

1.4 文件选择框(file)

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

演示程序

2 非表单相关

2.1 按钮1(button)

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

演示程序

2.2 按钮2(button)

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

演示程序

2.3 模态框(Modal)

一个简单的模态框样式。纯CSS实现,需要约90行的CSS代码。

演示程序

2.4 导航条1(navbar)

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

演示程序

2.5 导航条2(navbar)

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

演示程序

2.6 面包屑(breadcrumb)

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

演示程序

2.7 块引用(blockquote)

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

演示程序

2.8 滑动门(slider)

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

演示程序

2.9 选项卡(tab)

一个简单的选项卡样式。需要约60行CSS代码。

演示程序

2.10 分页(Pagination)

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

演示程序

2.11 响应式表格(table)

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

演示程序

3 说明

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

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

【收藏】这么多WEB组件(CSS),攒一个网站够了吧?的更多相关文章

  1. web组件开发入门

    本文是学习慕课网阿当大话西游之WEB组件后的一个总结. 组件的分类 1 框架组件:依赖于某种框架的组件 2 定制组件:根据公司业务定制的组件 3 独立组件:不依赖框架的组件 定义和加载组件 解决css ...

  2. 谷歌宣称web组件才是web开发的未来

    谷歌宣称web组件才是web开发的未来 虽然今年的谷歌I/O大会没有出现像去年谷歌眼镜发布时直播疯狂跳伞这样的活动,但是上周仍然有不少产品推出.谷歌宣布对谷歌地图.搜索.安卓,以及其他 很多产品做出更 ...

  3. 配置 Web 组件服务器 IIS 证书

    用 IIS 6 配置 Web 组件证书(对于 Windows Server 2003)     使用 IIS 管理器向 Web 组件服务器分配证书.对合并池配置中的 Standard Edition ...

  4. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  5. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  6. amazeui中css组件、js组件、web组件的区别

    amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...

  7. Mozilla Brick:一个Web组件Polyfill库

    Web组件是一个W3C规范,它旨在使Web开发人员能够定义具有非常丰富的视觉效果和高可交互性且易于组合的小组件.Brick库提供了新的自定义HTML标签,从而抽象了用户常用接口模式.在浏览器本身支持类 ...

  8. 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...

  9. 漫谈Nuclear Web组件化入门篇

    目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...

随机推荐

  1. 一些奇怪的Javascript用法

    阅读AngularJS时,看到一些奇怪的Javascript用法.1.(function(){        a.work=function(){}   })(a)   声明一个匿名函数并执行 2. ...

  2. vue 绑定属性(index)

    <el-menu-item v-for="item in links" :key="item.id" v-bind:index="item.id ...

  3. 【前端自动化】Gulp的使用(一):安装gulp

    作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html  css   jquery, 现 ...

  4. [CentOS7] 增加yum源

    下载最新rpm文件:http://fedoraproject.org/wiki/EPEL 通过源文件rpm来增加: rpm -ivh epel-release-latest-7.noarch.rpm

  5. Codeforces - 77B - Falling Anvils - 几何概型

    https://codeforc.es/contest/77/problem/B 用求根公式得到: \(p-4q\geq0\) 换成熟悉的元: \(y-4x\geq0\) 其中: \(x:[-b,b] ...

  6. nginx 安装遇到的问题

    今天想学学 nginx,于是先把它安装起来.按照 http://nginx.org/en/linux_packages.html 上面的方法,在我的 ubuntu 虚拟机上很容易地就安装好了.可是要运 ...

  7. 《OD学hadoop》20160903某旅游网项目实战

    一.大数据的落地点 1.数据出售 数据商城:以卖数据为公司的核心业务 2. 数据分析 百度统计 友盟 GA IBM analysis 3.搜索引擎 4. 推荐系统 mahout 百分比 5.精准营销 ...

  8. [Xcode 实际操作]五、使用表格-(6)UITableView滑动到指定单元格

    目录:[Swift]Xcode实际操作 本文将演示如何使表格滑动到指定的索引路径. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...

  9. [Xcode 实际操作]四、常用控件-(15)MKMapView加载简单视图

    目录:[Swift]Xcode实际操作 本文将演示地图视图的使用方法. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先往视图控制 ...

  10. 【常见Web应用安全问题】

    Web应用程序的安全性问题依其存在的形势划分,种类繁多,这里不准备介绍所有的,只介绍常见的一些. 常见Web应用安全问题安全性问题的列表: 1.跨站脚本攻击(CSS or XSS, Cross Sit ...