pure css简单组件，借鉴bootstrap

<!doctype html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!--缩放比例以及允许缩放-->

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!--格式的检测，电话，邮箱-->

<meta name="format-detection" content="telephone=no, email=no" />

<!--是否显示苹果工具栏和菜单栏-->

<meta name="apple-mobile-web-app-capable" content="yes" />

<!--状态栏样式-->

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<title>按钮扩展</title>

<!--[if lte IE 8]>

    <link rel="stylesheet" type="text/css" href="pure0.6.0/grids-responsive-old-ie-min.css">

<![endif]-->

<!--[if gt IE 8]><!-->

<link rel="stylesheet" type="text/css" href="pure0.6.0/pure-min.css">

<!--<![endif]-->

<style>

.button-success, .button-error, .button-warning, .button-secondary {

	color: white;

	border-radius: 4px;

	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

}

.button-success {

	background-color: #1CB841;

}

.button-error {

	background-color: #CA3C3C;

}

.button-warning {

	background-color: #DF7514;

}

.button-secondary {

	background-color: #42B8DD;

}

/*分页*/

.pure-paginator {

	letter-spacing: -0.31em;

	/* Webkit: collapse white-space between units; */

	text-rendering: optimizespeed;

	/* Webkit: fixes text-rendering: optimizeLegibility; */

	list-style: none;

	margin: 0;

	padding: 0;

}

.pure-paginator li {

	display: inline-block;

	zoom: 1;

	letter-spacing: normal;

	word-spacing: normal;

	vertical-align: top;

	text-rendering: auto;

}

.pure-button-primary.pure-button-active {

	background-color: #E6E6E6;

	color: #666666;

}

.pure-form .pure-input-group {

	margin-bottom: 0;

	vertical-align: middle;

	position: relative;

	border-collapse: separate;

	vertical-align: middle;

	box-sizing: border-box;

	display: table;

}

.pure-input-group-addon {

	padding: 6px 12px;

	font-size: 14px;

	font-weight: 400;

	line-height: 1;

	color: #555;

	text-align: center;

	background-color: #E6E6E6;

	border: 1px solid #ccc;

	border-radius: 4px;

	white-space: nowrap;

	vertical-align: middle;

}

.pure-input-group-addon:first-child {

	border-right: 0;

	border-top-right-radius: 0;

	border-bottom-right-radius: 0;

	width: auto;

	display: table-cell;

}

.pure-input-group-addon:last-child {

	border-left: 0;

	border-top-left-radius: 0;

	border-bottom-left-radius: 0;

	width: auto;

	display: table-cell;

}

.pure-input-group input:not(:first-child):not(:last-child) {

	border-radius: 0;

}

.pure-input-group input:not(:first-child) {

	border-top-left-radius: 0;

	border-bottom-left-radius: 0;

}

.pure-input-group input:not(:last-child) {

	border-top-right-radius: 0;

	border-bottom-right-radius: 0;

}

/*参考bootstrap的箭头*/

.pure-caret {

	display: inline-block;

	width: 0;

	height: 0;

	margin-left: 2px;

	vertical-align: middle;

	border-top: 4px dashed;

	border-right: 4px solid transparent;

	border-left: 4px solid transparent;

}

/*tab*/

.pure-tab {

	letter-spacing: -0.31em;

	/* Webkit: collapse white-space between units; */

	text-rendering: optimizespeed;

	/* Webkit: fixes text-rendering: optimizeLegibility; */

	list-style: none;

	margin: 0;

	padding: 0;

	border-bottom: 1px #e6e6e6 solid;

}

.pure-tab li {

	display: inline-block;

	zoom: 1;

	letter-spacing: normal;

	word-spacing: normal;

	vertical-align: top;

	text-rendering: auto;

	margin-bottom: -1px;

}

.pure-tab li .pure-button {

	background-color: #FFF;

}

.pure-tab-active {

	background-color: #E6E6E6;

	color: #666666;

	border: 1px #e6e6e6 solid;

	border-bottom: 0px;

}

.pure-tab li .pure-button:active, .pure-tab li .pure-button:link, .pure-tab li .pure-button:visited {

	box-shadow: none;

	background: none;

	background-color: #FFF;

}

.pure-tab li .pure-button:hover {

	background-color: #e6e6e6;

}

</style>

</head>

<body>

<p>按钮</p>

<hr/>

<button class="button-success pure-button">Success Button</button>

<button class="button-error pure-button">Error Button</button>

<button class="button-warning pure-button">Warning Button</button>

<button class="button-secondary pure-button">Secondary Button</button>

<hr/>

<a class="pure-button button-success " href="#">A Primary Button</a> <a class="pure-button button-warning" href="#">A Primary Button</a> <a class="pure-button button-secondary" href="#">A Primary Button</a> <a class="pure-button button-error" href="#">A Primary Button</a>

<hr/>

<ul class="pure-paginator">

  <li><a class="pure-button prev" href="#">«</a></li>

  <li><a class="pure-button" href="#">1</a></li>

  <li><a class="pure-button pure-button-active" href="#">2</a></li>

  <li><a class="pure-button button-warning" href="#">3</a></li>

  <li><a class="pure-button" href="#">4</a></li>

  <li><a class="pure-button button-warning pure-button-active" href="#">5</a></li>

  <li><a class="pure-button next" href="#">»</a></li>

</ul>

<hr/>

<p>表单扩展</p>

<hr/>

<form class="pure-form">

  <div class="pure-input-group">

    <div class="pure-input-group-addon">$</div>

    <input type="text" class="pure-input-1"  placeholder="Amount"/>

    <div class="pure-input-group-addon">.00</div>

  </div>

  <hr/>

  <div class="pure-input-group">

    <input type="text" class="pure-input-1"  placeholder="Amount"/>

    <div class="pure-input-group-addon">.00</div>

  </div>

  <hr/>

  <div class="pure-input-group">

    <div class="pure-input-group-addon">$</div>

    <input type="text" class="pure-input-1"  placeholder="Amount"/>

  </div>

</form>

<hr/>

<div class="pure-caret"></div>

<hr>

<div class="pure-menu pure-menu-horizontal">

  <ul class="pure-menu-list">

    <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>

    <li class="pure-menu-item pure-menu-allow-hover"> <a href="#" id="menuLink1" class="pure-menu-link">Contact

      <div class="pure-caret"></div>

      </a>

      <ul class="pure-menu-children">

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>

      </ul>

    </li>

  </ul>

</div>

<hr/>

<ul class="pure-tab">

  <li><a class="pure-button " href="#">111</a></li>

  <li><a class="pure-button " href="#">222</a></li>

  <li><a class="pure-button pure-tab-active" href="#">333</a></li>

  <li><a class="pure-button " href="#">444</a></li>

  <li><a class="pure-button " href="#">555</a></li>

</ul>

<hr/>

</body>

</html>

在使用菜单箭头时候有一个小bug（我已经在github提交了该bug，也得到了反馈，可能会改进），问题链接https://github.com/yahoo/pure/issues/489#issuecomment-103159329

第一次给老外报告bug得到反馈很激动哈。虽然我用了中文，但是对方用谷歌去翻译了。

pure css简单组件，借鉴bootstrap的更多相关文章

Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）
(转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...
可以从CSS框架中借鉴到什么
http://isux.tencent.com/css-framework.html http://isux.tencent.com/css-framework.html 现在很多人会使用 CSS 框 ...
JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
JS组件系列——Bootstrap 树控件使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
Pure Css 菜单的使用
本人新手,之前偶尔接触Bootstrap,也做过一些响应式开发,但是都是略显皮毛,公司的业务需求也限制了深入学习. 现着手Pure Css学习,尝试了简单的左边菜单自动隐藏的demo.闲话少说,代码贴 ...
[转]JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐
本文转自:https://www.cnblogs.com/landeanfen/p/5461849.html#_label3 阅读目录一.时间组件 1.效果展示 2.源码说明 3.代码示例二.自增 ...
【转】JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

随机推荐

C语言中的位操作（12）--判断一个数字是否包含一个全零字节
本文主要介绍一系列算法,算法主要功能是判断一个数字(二进制)中是否包含全零字节 e.g.1010 1111 0000 0000 1001 1111 0001 1111 即 32位整数:A4A3A2A1 ...
通用jquery页面验证
页面通过给input 标签设置样式或者属性,即可实现所有页面的验证,customValidate方法并支持自己补充验证! 验证包括:必输项,只能输入数字, 输入数字并设定小数最大位数,下拉框必选,复选 ...
java：安装Runtime Environment，设置Tomcat Server 的方法
Eclipse 中开发Webapp, 一般需要配置Tomcat Server, 以便在Eclipse 中进行Debug.具体的步骤如下: 1. Windows ==>Preference ==& ...
asp.net中关于《%=》《%#》《%》的用法——（转帖）
1:在.aspx页面,<% %>标签相当于在.cs页面的代码,也就是说你在.cs文件里面怎样写,就可以在.aspx文件里面的<% %>标签里面怎样写. 2:在.aspx页面,& ...
Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
Tomcat启动分析(我们为什么要配置CATALINA_HOME环境变量）
原文:http://www.cnblogs.com/heshan664754022/archive/2013/03/27/2984357.html Tomcat启动分析(我们为什么要配置CATALIN ...
Git_学习_00_资源帖
1.廖雪峰: (1)Git教程 2.阮一峰: (1)Git分支管理策略 (2)Git远程操作详解 (3)Git 使用规范流程 (4)Github 的清点对象算法 (5)常用 Git 命令清单 (6)G ...
【Codeforces Round #466】E. Cashback DP+ST表
题意给定$n$个数,将其划分成若干个连续的子序列,求最小价值,数组价值定义为,数组和减去$\lfloor \frac{k}{c} \rfloor$,$k$为数组长度,$c$为给定数可以列得朴素方程 ...
BEC listen and translation exercise 39
What about jigsaw puzzle design for visually handicapped?给视觉障碍人士设计拼图怎么样? Length is 50cm, and then th ...
直播推流实现RTMP协议的一些注意事项
—— 2017-2-12 更新RTMP 协议整理了一下,包括rtmp 消息类型,rtmp 如何分块,rtmp分块例子. 用脑图整理了一下,使用Xmind 打开,URL: https://github. ...

pure css简单组件，借鉴bootstrap

pure css简单组件，借鉴bootstrap的更多相关文章

随机推荐

热门专题