风雨后见彩虹

2015年10月1日

摘要：如何实现背景透明，文字不透明，兼容所有浏览器？我们平时调整的不透明度如图所示：实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法： css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, al 阅读全文

posted @ 2015-10-01 21:30 风雨后见彩虹阅读(3915) 评论(0) 推荐(2) 编辑

常用中文字体 Unicode 编码

摘要：各大网站的字体选择网站字体腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif; 蘑菇街 font: 12px/1. 阅读全文

posted @ 2015-10-01 20:24 风雨后见彩虹阅读(1236) 评论(0) 推荐(0) 编辑

移动web页面使用的字体的思考

摘要：前言记得做PC端页面的时候，字体一般设置为微软雅黑，现在做起移动端页面来了，设计师们一般都还把字体设置为微软雅黑字体，但是做出来后，测试的时候发现页面中的字体不是微软雅黑，怎么办？后来了解到的手机系统 ios、android 等是不支持微软雅黑字体。为了满足产品的需要，保证视觉稿的还原度，手机端阅读全文

posted @ 2015-10-01 19:47 风雨后见彩虹阅读(785) 评论(0) 推荐(0) 编辑

小tips：JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

摘要：在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。 JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；结果：string 结阅读全文

posted @ 2015-10-01 09:19 风雨后见彩虹阅读(1587) 评论(1) 推荐(0) 编辑

2015年9月30日

CSS之Medial Queries的另一用法：实现IE hack的方法

摘要：所谓Medial Queries就是媒体查询。随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择，让站点在不同的设备中实现不同的效果。众所周知，有些时候为了实现IE下的某些效果与现代浏览器一致，我们不得不使用一些阅读全文

posted @ 2015-09-30 21:55 风雨后见彩虹阅读(334) 评论(0) 推荐(0) 编辑

HTML5本地存储localStorage与sessionStorage详解

摘要：前言在最近的项目中用到了html5的本地存储，下面总结一下。 1、html5几种存储形式本地存储（localStorage && sessionStorage）离线缓存（application cache） indexedDB 和 webSQL 2、localStorage && sessio 阅读全文

posted @ 2015-09-30 09:04 风雨后见彩虹阅读(4716) 评论(1) 推荐(1) 编辑

2015年9月29日

HTML5 Geolocation获取地理位置信息

摘要： Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。 Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPo 阅读全文

posted @ 2015-09-29 23:22 风雨后见彩虹阅读(2040) 评论(0) 推荐(0) 编辑

关于CSS中的字体尺寸设置 em rem等

摘要：常用单位在CSS中可以用很多不同的方式来设定字体的尺寸。一般来说，这些单位被分成两大类：绝对单位(absolute)和相对单位(relative)。绝对单位在大多数情况下是相对于某些实际量度而言的固定值，即是说它们一旦设定，就不会因为其他元素的字体尺寸变化而变化。相对单位没有一个固定的度量值，阅读全文

posted @ 2015-09-29 17:25 风雨后见彩虹阅读(3261) 评论(0) 推荐(1) 编辑

JS计算系统当前日期是星期几的几种方法

摘要：方法一：方法二：方法三：方法四：当然这四种方法的完美程度是一目了然的。阅读全文

posted @ 2015-09-29 08:45 风雨后见彩虹阅读(6385) 评论(0) 推荐(2) 编辑

2015年9月28日

jQuery之$.ajax()方法详解及实例

摘要： 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:要求为Number类型的参数阅读全文

posted @ 2015-09-28 22:17 风雨后见彩虹阅读(1837) 评论(0) 推荐(0) 编辑

pace.js – 加载进度条插件

摘要：这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和阅读全文

posted @ 2015-09-28 17:23 风雨后见彩虹阅读(4679) 评论(1) 推荐(0) 编辑

在线代码编辑、保存与运行网址推荐

摘要：最近开始讨厌写一个demo，写好之后要上传到服务器，传好之后还要找对地址，以后如果改版还需要下载代码，编辑代码，再上传。多么繁复的过程，我只是写个demo而已。于是，我开始寻找在线工具实现 1. CodePen CodePen只是一个web前端的运行场地，具备机动、训练和分享等多种功能。同时，Co 阅读全文

posted @ 2015-09-28 14:40 风雨后见彩虹阅读(1629) 评论(0) 推荐(0) 编辑

AngularJS 简介

摘要： AngularJS 是一个JavaScript 框架。它可通过注：建议把脚本放在元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTMLAngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 Angula... 阅读全文

posted @ 2015-09-28 13:01 风雨后见彩虹阅读(527) 评论(0) 推荐(0) 编辑

CSS3 Filter详解（改变模糊度亮度透明度等方法）

摘要： CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效阅读全文

posted @ 2015-09-28 10:25 风雨后见彩虹阅读(57948) 评论(2) 推荐(10) 编辑

2015年9月26日

CSS之HTML meta viewport属性详解

摘要：什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最阅读全文

posted @ 2015-09-26 20:25 风雨后见彩虹阅读(3116) 评论(0) 推荐(0) 编辑

2015年9月25日

移动开发js库Zepto.js应用详解

摘要：从哪里下载 Zepto地址：http://zeptojs.com/中文版地址：http://www.css88.com/doc/zeptojs_api/这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？在这个README里面你会惊奇地发现，Zepto 源码中有 14 ... 阅读全文

posted @ 2015-09-25 17:07 风雨后见彩虹阅读(1135) 评论(0) 推荐(0) 编辑

HTML5实现video标签的自定义播放进度条

摘要：现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。 html代码： js代码：阅读全文

posted @ 2015-09-25 10:11 风雨后见彩虹阅读(49160) 评论(0) 推荐(5) 编辑

2015年9月24日

jQ效果：jQuery和css自定义video播放控件

摘要：下面介绍一下通过jquery和css自定义video播放控件。 Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受阅读全文

posted @ 2015-09-24 22:48 风雨后见彩虹阅读(8135) 评论(0) 推荐(0) 编辑

HTML5 audio与video标签实现视频播放，音频播放

摘要：随着互联网的飞速发展以及HTML5的应用，越来越多的项目中用到video，audio当常用标签。 audio 标签属性当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：再如下面： video标签属性下面先介绍下video标阅读全文

posted @ 2015-09-24 10:44 风雨后见彩虹阅读(16433) 评论(0) 推荐(2) 编辑

2015年9月22日

CSS3 圆角（border-radius）详解

摘要：在做网页的时候，常常需要实现圆角，以前的做法就是切图，现在好了，有了css3的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。 border 阅读全文

posted @ 2015-09-22 23:35 风雨后见彩虹阅读(4364) 评论(0) 推荐(0) 编辑

如何禁止 iPhone Safari video标签视频自动全屏？

摘要：最近做一个移动端微信页面项目，在微信页面中有视频播放，但是需要禁止IOS的自动全屏播放（前提必须使用video标签）。如： <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> < 阅读全文

posted @ 2015-09-22 20:45 风雨后见彩虹阅读(5037) 评论(0) 推荐(0) 编辑

2015年9月17日

HTML5的DeviceOrientation实现微信摇一摇功能

摘要：在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。而通过DeviceMotion对设备运动状态的判断，则可以帮阅读全文

posted @ 2015-09-17 18:47 风雨后见彩虹阅读(2657) 评论(0) 推荐(0) 编辑

CSS效果：CSS select样式优化含jquery代码

摘要： CSS 下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，可以得到如下图这样的： html结构如下： <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city"> 阅读全文

posted @ 2015-09-17 18:37 风雨后见彩虹阅读(1967) 评论(0) 推荐(0) 编辑

CSS3布局之多列布局columns详解

摘要： columns语法：columns：[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度其中：[ column-width ]：设置或检索对象每列的宽度；[ column-count ]：设置或检索对象的列数。 css代码： html代码：结果阅读全文

posted @ 2015-09-17 18:34 风雨后见彩虹阅读(10013) 评论(0) 推荐(0) 编辑

2015年9月16日

使用CSS如何解决inline-block元素的空白间距

摘要：早上在博客中有人提了这样一个问题：“li元素inline-block横向排列，出现了未知间隙”，我相信大家在写页面的时候都遇到过这样的情况吧。我一般遇到这情况都会把li浮动起来，这样就没有间隙。但是解决这个未知间隙，还是有很多办法的，在w3cplus上提供了好几种解决办法。在这总结一下。先看结构阅读全文

posted @ 2015-09-16 17:38 风雨后见彩虹阅读(1983) 评论(0) 推荐(1) 编辑

2015年9月14日

CSS3布局之box-flex的使用

摘要：语法：其中number取值：使用浮点数指定对象所分配其父元素剩余空间的比例。设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本) html代码： css代码：得到的结果如图所示: 注：其实上面的css代码中-ms-box-flex与box-flex可以省略，为什么这么说呢，IE6- 阅读全文

posted @ 2015-09-14 22:37 风雨后见彩虹阅读(1277) 评论(0) 推荐(0) 编辑

CSS总结div中的内容垂直居中的五种方法

摘要：一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段阅读全文

posted @ 2015-09-14 17:37 风雨后见彩虹阅读(297632) 评论(1) 推荐(28) 编辑

CSS中你知道的display的值有多少？用了多少？

posted @ 2015-09-14 16:02 风雨后见彩虹阅读(1610) 评论(1) 推荐(1) 编辑

2015年9月13日

CSS属性disabled和readonly的区别是什么

摘要：在博客园中看到这样一篇文章，关于disabled和readonly的区别，以前还真的没有注意它们的区别，还是有必要知道它们的区别的，所以转载了。这两个属性有类似之处，但是区别也是巨大的，之所以说类似，是因为这两个属性好像都貌似能够将指定的元素设置为"不可用"状态，下面就简单介绍一下它们两个的区别, 阅读全文

posted @ 2015-09-13 20:32 风雨后见彩虹阅读(3994) 评论(0) 推荐(2) 编辑

CSS之Normalize.css的使用（重置表）

摘要：本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normaliz 阅读全文

posted @ 2015-09-13 09:09 风雨后见彩虹阅读(3007) 评论(0) 推荐(1) 编辑

风雨后见彩虹

无论什么时候开始，重要的是不要停止

公告